Javascript document.getElementById('box').style.width="10px"; 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3983490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById('box').style.width="10px"; Doesn't work?
提问by mcbeav
I cannot seem to get this script to work. Can anyone please help? The DIV's width is not defined. It just stretches across the whole page.
我似乎无法让这个脚本工作。有人可以帮忙吗？未定义 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>
回答by C???
Your script is running before the <div>is rendered on the page. Try it like this:
您的脚本<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>
And don't forget to close your <body>and <html>tags.
并且不要忘记关闭您的<body>和<html>标签。
To prove that it is, look at this example. I moved the script back to the <head>section and changed the width setting to run when the window is finished loading.
为了证明它是，看看这个例子。我将脚本移回该<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>
You'll see the 'test' alert message before the box is rendered.
在呈现框之前，您将看到“测试”警报消息。
回答by Jason McCreary
The element does not exist on the page yet. JavaScript can not access/manipulate an element until it has been loaded in the DOM. You can overcome this by moving you <script>block to above the closing </body>. Or use an window.load event.
该元素尚不存在于页面上。JavaScript 不能访问/操作一个元素，直到它被加载到 DOM 中。您可以通过将<script>块移动到收盘价上方来克服这个问题</body>。或者使用 window.load 事件。
An example of the former using your code is here - http://jsfiddle.net/ycWxH/
前者使用您的代码的例子在这里 - http://jsfiddle.net/ycWxH/
回答by gfivehost
if you will use jquery it is more easy to do that. that is if you will only use jquery framework here is the code
如果您将使用 jquery，则更容易做到这一点。也就是说，如果您只使用 jquery 框架，这里是代码
$('#box').height(10);
回答by jebberwocky
just a reminder, window.onloadis fired when page fully loaded.
refer to http://www.javascriptkit.com/dhtmltutors/domready.shtml
只是一个提醒，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>
