Ustaw szerokość lub wysokość elementu w trybie standardowym

123

Czy można ustawić szerokość lub wysokość elementu HTML (np. <div>) W JavaScript w trybie Standards?

Zwróć uwagę na następujący kod:

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

Gdy użytkownik naciśnie przycisk zmiany szerokości , <div>szerokość powinna się zmienić.

Działa dobrze, gdy deklaracja doctype określa tryb osobliwości. W trybie standardów nie mogę w ten sposób zmienić rozmiaru elementu

Czy można manipulować rozmiarem elementu w trybie standardów? Jak ominąć tę dysfunkcjonalność?

javascript size standards element quirks-mode rafaleria
źródło

Odpowiedzi:

191

Spróbuj zadeklarować jednostkę szerokości:

e1.style.width = "400px"; // width in PIXELS
Alexandre Perez
źródło
1
Ahaha .. mam na myśli „miau” (c). Spędziłem około godziny, próbując dowiedzieć się, dlaczego nie stosuje się stylu. Dzięki!
Vitalii Vasylenko
1
Warto wspomnieć, że szerokość nie obejmuje marginesów, a kiedy box-sizing: border-box;szerokość będzie zawierała obramowania, inaczej szerokość nie obejmuje obramowań.
Qian Chen,
39

styleWłaściwość pozwala określić wartości dla właściwości CSS.

Właściwość CSS widthprzyjmuje jako wartość długość.

Długości wymagają jednostek. W trybie dziwactw przeglądarki mają tendencję do zakładania pikseli, jeśli podano liczbę całkowitą zamiast długości. Określ jednostki.

e1.style.width = "400px";
Quentin
źródło