Установить ширину или высоту элемента в стандартном режиме

123

Можно ли установить ширину или высоту элемента HTML (например <div>) в JavaScript в стандартном режиме?

Обратите внимание на следующий код:

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

Когда пользователь нажимает кнопку изменения ширины , <div>ширина должна измениться.

Он отлично работает, когда объявление doctype определяет режим Quirks. В стандартном режиме я не могу изменить размер элемента таким образом

Можно ли изменить размер элемента в стандартном режиме? Как обойти эту неисправность?

— rafalry
источник

191

Попробуйте объявить единицу ширины:

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

— Александр Перес
источник

1

Ахаха .. я имею в виду "мяу" (с). Я потратил около часа, пытаясь понять, почему стиль не применяется. Спасибо!

— Виталий Василенко

1

Стоит отметить, что ширина не включает поля, и когда box-sizing: border-box;ширина будет включать границы, иначе ширина не включает границы.

— Цянь Чен

39

styleСвойство позволяет задать значения для свойств CSS.

Свойство CSS widthпринимает в качестве значения длину.

Длина требует единиц. В режиме причуд браузеры, как правило, принимают пиксели, если указаны целые числа вместо длины. Укажите единицы измерения.

e1.style.width = "400px";

— Quentin
источник