width - CSS en Javascript

Définition du JS width.

La propriétés Javascript width CSS permet de spécifier en Javascript comment la longueur width d'un élément.

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

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

La propriété CSS width renvoie 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 width JS

Conditions d'application de la CSS width.

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

Problème d'interprétation de width 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 width 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é width.

Infos complémentaires javascript width

Test si le width va renvoyer une valeur cohérente

Pour palier au problème du width 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 gauche et droite aussi que les padding gauche et droite.

Compatibilités navigateurs

Votre avis sur la définition width en JS