我似乎无法让这个脚本工作.有人可以帮忙吗？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>
Cᴏʀ*_*ᴏʀʏ 14
您的脚本<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>
在呈现框之前,您将看到"测试"警报消息.
该元素尚未存在于页面上.在将元素加载到DOM中之前,JavaScript无法访问/操作元素.您可以通过将<script>阻止移动到结束之上来克服此问题</body>.或者使用window.load事件.
前一个使用您的代码的例子在这里 - http://jsfiddle.net/ycWxH/