Définir la largeur ou la hauteur de l'élément en mode standard

123

Est-il possible de définir la largeur ou la hauteur de l'élément HTML (ex. <div> ) En JavaScript en mode Standards?

Notez le code suivant:

<html>
<script language="javascript" type="text/javascript">
    function changeWidth(){
        var e1 = document.getElementById("e1");
        e1.style.width = 400;
    } 
</script>
<body>
    <input type="button" value="change width" onclick="changeWidth()"/>
    <div id="e1" style="width:20px;height:20px; background-color:#096"></div>
</body>
</html>

Lorsque l'utilisateur appuie sur le bouton de changement de largeur , le<div> largeur du fichier doit changer.

Cela fonctionne bien lorsque la déclaration doctype détermine le mode Quirks. En mode standard, je ne peux pas changer la taille de l'élément de cette façon

Est-il possible de manipuler la taille d'un élément en mode Standards? Comment contourner cette disfonctionnalité?

— rafalerie
source

191

Essayez de déclarer l'unité de largeur:

e1.style.width = "400px"; // width in PIXELS

— Alexandre Perez
source

1

Ahaha .. je veux dire "miaou" (c). J'ai passé environ une heure à essayer de comprendre pourquoi le style n'est pas appliqué. Merci!

— Vitalii Vasylenko

1

Il convient de mentionner que la largeur n'inclut pas les marges, et lorsque box-sizing: border-box;la largeur comprendra des bordures, sinon la largeur n'inclut pas les bordures.

— Qian Chen

39

La stylepropriété vous permet de spécifier des valeurs pour les propriétés CSS.

La widthpropriété CSS prend une longueur comme valeur.

Les longueurs nécessitent des unités. En mode quirks, les navigateurs ont tendance à prendre des pixels s'ils sont fournis avec un entier au lieu d'une longueur. Spécifiez les unités.

e1.style.width = "400px";

— Quentin
source