Javascript - Modifier la hauteur (height) d'un élément HTML

Publié par Jeff - Dernière mise à jour le 20 novembre 2009 à 18:25 par Jeff
Pour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height".

Pour cela vous pouvez y faire référence de la manière suivante :


Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il existe deux façons selon les navigateurs :
  • element.offsetHeight
  • element.style.pixelHeight



Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML quel que soit le navigateur :
var height = document.getElementById('id_element').style.height;

Notez que si vous voulez modifier cette propriété, il faut spécifier "px".
Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML selon le navigateur :

<script type="text/javascript">
<!--
var obj = document.getElementById('id_element');
obj.style.height = "502px";
//-->
</script>


Si vous récupérez dynamiquement la valeur de la hauteur, vous devez donc concaténer "px" à cette valeur :
<script type="text/javascript">
<!--
var obj = document.getElementById('id_element');
obj.style.height = height+"px";
//-->
</script>