Question

我似乎无法让这个脚本工作。有人可以帮忙吗？ DIV的宽度未定义。它只是延伸到整个页面。

<html>
<head>
<style type="text/css">
#box{
    height:100px;
    border:3px;
    border-style:solid;
    border-color:#000;
}
</style>
<script>
document.getElementById('box').style.width="10px";
</script>
</head>
<body>
<div id="box"></div>

Answer 1

您的脚本在页面上呈现<div>之前正在运行。试试这样：

<html>
<head>
<style type="text/css">
#box{
    height:100px;
    border:3px;
    border-style:solid;
    border-color:#000;
}
</style>
</head>
<body>
    <div id="box"></div>

    <script type="text/javascript">
        document.getElementById('box').style.width="10px";
    </script>

</body>
</html>

不要忘记关闭<body>和<html>代码。

要证明它是，请看这个例子。我将脚本移回<head>部分，并将宽度设置更改为在窗口加载完毕后运行。

<html>
<head>
<style type="text/css">
#box{
    height:100px;
    border:3px;
    border-style:solid;
    border-color:#000;
}
</style>

<script type="text/javascript">
    alert('test');

    window.onload = function() {
        document.getElementById('box').style.width="10px";
    }
</script>

</head>
<body>
    <div id="box"></div>
</body>
</html>

在呈现框之前，您会看到“测试”警告消息。

Answer 2

页面上尚不存在该元素。在将元素加载到DOM中之前，JavaScript无法访问/操作元素。您可以通过将<script>块移至结束</body>之上来解决此问题。或者使用window.load事件。

使用您的代码的前者的示例在这里 - http://jsfiddle.net/ycWxH/

Answer 3

如果您使用jquery，那么更容易做到这一点。那就是你只使用jquery框架这是代码

$('#box').height(10);

Answer 4

只是提醒一下，当页面完全加载时会触发window.onload。参考http://www.javascriptkit.com/dhtmltutors/domready.shtml

<script>
function doMyStuff() = {};


if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", doMyStuff, false );
} else if ( document ) {
document.attachEvent("onreadystatechange",function(){
        if ( document.readyState === "complete" ) {doMyStuff();}
});}
</script>

。的document.getElementById（ '盒子'）style.width = “10px的”;不起作用？

4 个答案: