Il tag <div>, in html rappresenta un blocco per ragruppare e separare i contenuti di una pagina html. Secondo il block model, a differenza del tag <span> esso non è un elemento block inline, ossia qualsiasi altro elemento che vi sta affianco viene automaticamente riportato a capo, poichè esso occupa tutta la linea del documento (a meno di non specificare diversamente). Il tag div, viene usato in maniera massiccia nella realizzazione delle pagine html, sia come raccoglitore di contenuti che come blocco per il layout web, sopratutto in quei layout table less (che non fanno uso di tabelle) così consigliati dai più recenti standard web. L'elemento div può contenere qualsiasi altro elemento e testo, e nei siti dinamici assume un ruolo fondamentale, poichè in larghezza è un elemento block, come detto manda a capo gli altri elementi a seguire fuori dal div, in altezza invece ha la proprietà di adattarsi al contenuto che esso contiene, il chè lo rende utilissimo a questo scopo, ovvero nell'uso dei layout per siti con contenuti dinamici.
Allo stesso modo, possono nascere esigenze che il div abbia un'altezza fissa, impostata magari tramite una regola di stile, proprio per adattarsi bene al layout della pagina web e/o per una migliore resa grafica, come fare allora se il contenuto del div cambia dinamicamente o la sua altezza deve variare a seconda della pagina che navighiamo?
Siamo "costretti" a cambiare "al volo" l'altezza del div. Possiamo impostare l'altezza del div in due modi, o con i fogli di stile (css), o tramite Javascript; in questo articolo andiamo a scoprire come fare usando Javascript.
Se abbiamo un div con altezza fissa, ed abbiamo necessità di modificarne l'altezza a seconda la pagina o i contenuti caricati, possiamo scrivere una piccola funzione Javascript che ci aiuta nel nostro scopo. Prepariamo allora un piccolo script in Javascript, che contenga la funzione che si occuperà di settare l'altezza del div, ed andiamolo a posizionare o in un file js esterno che andremo a richiamare, o più semplicemente lo incorporiamo all'interno del codice della nostra pagina html, proprio prima della chiusura del tag head, lo script è il seguente:
<head>
...
<script type="text/javascript">
<!--
function SetHeight(id, height) {
document.getElementById(id).style.height = height;
}
// -->
</script>
</head>
La funzione Javascript SetHeight riceve due parametri, "id" e "height", il primo sarà l'id del div di cui dobbiamo modificare l'altezza, ed il secondo è il valore dell'altezza del div espresso in pixel. Così facendo, possiamo richiamare la funzione Javascript allo scatenarsi di un evento lato client, quale onload o più banalmente onclick. Con questa funzione, possiamo settare l'altezza non solo di un div, ma di un qualsiasi altro tag html al quale abbiamo impostato un proprio id, come un paragraph <p>, o <span>. Ovviamente essendo Javascript type-unsafe, ovvero non tipizzato, non abbiamo bisogno di specificare il tipo per i parametri passati, in questo caso stringa e numerico rispettivamente, sarà la funzione Javascript stessa ad assegnargli il giusto tipo.
Supponiamo pertanto di avere un layout, con dei div contenitori identici in altezza, impostata tramite css, e che l'altezza di un determinato div che rappresenta una colonna fissa, debba cambiare non appena ci spostiamo sull'anchor prodotti ad esempio, quindi all'evento onclick del link che porta alla pagina, invochiamo la funzione Javascript, in questo modo:
<ahref="#products"onclick="SetHeight(productID, 820)">Prodotti</a>
...
...
...
<divclass="panel"id="productID">
...
...
</div>
La funzione tramite "getElementById" identificherà l'id del DIV che noi gli abbiamo indicato e setterà l'altezza ad 820px, l'esempio è un pò grossolano, ma il concetto alla base è importante, applicandolo correttamente può risultare molto potente, ed utile in diversi contesti.
Così applicato però questo metodo presenta un errore con FireFox e Safari, potreste ritrovarvi a non capire perchè getElementById non funziona con FireFox e Safari, o dare la colpa a style.height che non funziona con FireFox, niente di tutto questo, semplicemente questi browser, FireFox e Safari, diciamo che sono più sensibili degli altri e vogliono specificato ben per benino cosa stiamo settando per l'altezza del div, insomma per farla breve dobbiamo aggiungere i caratteri in cui diciamo che sono pixel, in questo modo:
document.getElementById('id').style.height = height + 'px';
in questo modo l'altezza del div cambierà in base ai pixel specificati, sia in Internete Explorer, Opera, Safari e FireFox.
Conclusioni
Usare una funzione Javascript come questa, o una sua variante, per impostare e/o cambiare l'altezza di un div, può essere una tecnica molto efficace e di facile approccio, presenta però un grave inconveniente, non funziona se il browser ha Javascript disabilitato, il chè la rende praticamente inutilizzabile. Il metodo più corretto a mio avviso per impostare l'altezza di un div in modo d'avere la massima compatibilità cross-browser e navigabilità, è tramite l'uso dei Fogli di Stile (CSS) per settare l'altezza di un div, usando le proprietà e gli attributi corretti si può impostare l'altezza del div in maniera esatta e senza controindicazioni. In effetti anche tramite Javascript andiamo sempre e comunque ad agire sulla proprietà css height del div, quindi il risultato e l'obiettivo coincidono, solo che in caso di Javascript disabilitato il metodo qui indicato non funziona.
Chiunque voglia aggiungere qualcosa in merito a "Impostare altezza div con Javascript", può farlo liberamente tramite i commenti.