Set element width or height in Standards Mode

Asked 12/1, 2011 at 10:23 Answered 12/1, 2011 at 10:32

Solved javascript size standards element quirks-mode

157

Is it possible to set width or height of HTML element (ex. <div>) in JavaScript in Standards Mode?

Note the following 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>

When user presses the change width button, the <div>'s width should change.

It works fine when doctype declaration determines Quirks Mode. In Standards Mode I'm unable to change the element's size this way

Is it possible to manipulate the size of an element in Standards Mode? How to bypass this disfunctionality?

Uncharitable answered 12/1, 2011 at 10:23 Comment(0)

241

Try declaring the unit of width:

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

Ahasuerus answered 12/1, 2011 at 10:30 Comment(3)

Ahaha.. i mean "meow" (c). I've spend about an hour, trying to figure out why style is not applied. Thanks! – Meredeth 29/11, 2017 at 17:28

It's worth mentioning the width does not including margins, and when box-sizing: border-box;, the width will include borders, elsewise the width doesn't include borders. – Castano 6/4, 2018 at 6:33

Fairly obnoxious that window.innerWidth returns just an integer without any units attached... – Spier 26/6, 2021 at 4:23

The style property lets you specify values for CSS properties.

The CSS width property takes a length as its value.

Lengths require units. In quirks mode, browsers tend to assume pixels if provided with an integer instead of a length. Specify units.

e1.style.width = "400px";

Ctenophore answered 12/1, 2011 at 10:32 Comment(0)

Recommended topics

Hot tags