Imposta la larghezza o l'altezza dell'elemento in modalità Standard

123

È possibile impostare la larghezza o l'altezza dell'elemento HTML (es. <div>) In JavaScript in modalità standard?

Nota il codice seguente:

<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>

Quando l'utente preme il pulsante di modifica della larghezza , la <div>larghezza di dovrebbe cambiare.

Funziona bene quando la dichiarazione di doctype determina la modalità Quirks. In modalità standard non sono in grado di modificare la dimensione dell'elemento in questo modo

È possibile manipolare la dimensione di un elemento in modalità Standard? Come aggirare questa disfunzionalità?

— rafalry
fonte

191

Prova a dichiarare l'unità di larghezza:

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

— Alexandre Perez
fonte

1

Ahaha .. intendo "miao" (c). Ho passato circa un'ora cercando di capire perché lo stile non viene applicato. Grazie!

— Vitalii Vasylenko

1

Vale la pena ricordare che la larghezza non include i margini e quando box-sizing: border-box;, la larghezza includerà i bordi, altrimenti la larghezza non include i bordi.

— Qian Chen

39

La styleproprietà consente di specificare i valori per le proprietà CSS.

La widthproprietà CSS prende una lunghezza come valore.

Le lunghezze richiedono unità. In modalità quirks, i browser tendono ad assumere pixel se forniti di un numero intero invece di una lunghezza. Specifica le unità.

e1.style.width = "400px";

— Quentin
fonte