在标准模式下设置元素的宽度或高度


123

是否可以<div>在标准模式下的JavaScript中设置HTML元素(例如)的宽度或高度?

请注意以下代码:

<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模式时,它可以正常工作。在标准模式下,我无法通过这种方式更改元素的大小

在标准模式下可以操纵元素的大小吗?如何绕过这种功能失调?

Answers:


191

尝试声明宽度单位:

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

1
啊哈..我的意思是“喵”(c)。我花了大约一个小时,试图弄清为什么不应用样式。谢谢!
Vitalii Vasylenko

1
值得一提的是宽度不包含边距,当时box-sizing: border-box;,宽度将包含边框,否则宽度不包含边框。
钱琛

39

style属性使您可以为CSS属性指定值。

CSS width属性以长度作为其值。

长度需要单位。在怪癖模式下,如果浏览器提供的是整数而不是长度,则倾向于假定像素。指定单位。

e1.style.width = "400px";
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.