Stellen Sie die Elementbreite oder -höhe im Standardmodus ein

123

Ist es möglich, die Breite oder Höhe des HTML-Elements (z. B. <div>) in JavaScript im Standardmodus festzulegen?

Beachten Sie den folgenden Code:

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

Wenn der Benutzer die Schaltfläche zum Ändern der Breite drückt, sollte sich die <div>Breite ändern.

Es funktioniert einwandfrei, wenn die Doctype-Deklaration den Quirks-Modus bestimmt. Im Standardmodus kann ich die Größe des Elements auf diese Weise nicht ändern

Ist es möglich, die Größe eines Elements im Standardmodus zu ändern? Wie kann man diese Störung umgehen?

javascript size standards element quirks-mode Rafalry
quelle

Antworten:

191

Versuchen Sie, die Breiteneinheit zu deklarieren:

e1.style.width = "400px"; // width in PIXELS
Alexandre Perez
quelle
1
Ahaha .. ich meine "Miau" (c). Ich habe ungefähr eine Stunde damit verbracht herauszufinden, warum Stil nicht angewendet wird. Vielen Dank!
Vitalii Vasylenko
1
Es ist erwähnenswert, dass die Breite keine Ränder enthält, und wenn box-sizing: border-box;die Breite Ränder enthält, enthält die Breite auch keine Ränder.
Qian Chen
39

Mit der styleEigenschaft können Sie Werte für CSS-Eigenschaften angeben.

Die CSS- widthEigenschaft nimmt eine Länge als Wert an.

Längen erfordern Einheiten. Im Quirks-Modus neigen Browser dazu, Pixel anzunehmen, wenn sie mit einer Ganzzahl anstelle einer Länge versehen sind. Geben Sie Einheiten an.

e1.style.width = "400px";
QUentin
quelle