height - CSS en Javascript

Définition du JS height.

La propriétés Javascript height CSS permet de spécifier la hauteur height d'un élément.

oDomElement.style.height = "20px";
oDomElement.style.height = "auto";
oDomElement.style.height = "10%";

La propriété Javascript height peut prendre toutes les valeurs de la propriété CSS height.

La propriété CSS height renvoie en Javascript une valeur de type String :

• valeur calculée en px, par défaut pour la valeur calculée et vide pour la valeur locale.
• ou la valeur calculée en px pour la valeur calculée et la valeur spécifiée pour la valeur locale.

Exemple de code height JS

Conditions d'application de la CSS height.

La propriété Javascript height s'applique dans les mêmes conditions que la propriété CSS height

Problème d'interprétation de height en JS.

Quand vous utilisez la propriété box-sizing : border-box; (ou ses formes préfixées), certains navigateurs renvoient comme valeur calculée le height avec le padding et avec la taille de la bordure.

Pour les problÚmes plus généraux non liés au Javascript, consultez la définition CSS de la propriété height.

Infos complémentaires javascript height

Test si le height va renvoyer une valeur cohérente

Pour palier au problème du height vous pouvez faire un petit test Javascript :

function testBoxSizingTaille(){
    var bIsBug = null, oDivStyle = null, oDocElem = window.document.documentElement, oDiv = document.createElement( "div" );
    oDiv.innerHTML = "";
    oDiv.style.cssText = "display:block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;border:1px; padding:1px; width:4px;";
    oDocElem.appendChild( oDiv );
    oDivStyle = window.getComputedStyle( oDiv, null );
    bIsBug  = oDivStyle.width === "4px";
    oDocElem.removeChild( oDiv);
return bIsBug;
}

Si testBoxSizingTaille() renvoie true et que l'élément est de type box-sizing : border-box, alors vous devrez vous même soustraire les bordures haute et basse aussi que les padding haute et basse.

Compatibilités navigateurs

Votre avis sur la définition height en JS