代码之家 › 专栏 › 技术社区 › mcbeav

document.getElementById('box').style.width=“10px”;不起作用?

css javascript

mcbeav · 技术社区 · 15 年前

我似乎无法让这个剧本发挥作用。有人能帮忙吗?未定义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>

4 回复 | 直到 15 年前

Jason McCreary 15 年前

元素在页上尚不存在。在将元素加载到DOM中之前,JavaScript无法访问/操作该元素。你可以通过移动你来克服这个问题 <script> 闭塞物至闭塞物上方 </body> . 或者使用window.load事件。

下面是前者使用代码的示例- http://jsfiddle.net/ycWxH/

Cá´ÊÊ bcherry 15 年前

你的脚本在 <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>

在呈现框之前,您将看到“测试”警报消息。

RicardO 15 年前

如果您将使用jquery,那么这样做更容易。如果您只使用jquery框架这是密码

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

jebberwocky 15 年前

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

9 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

9 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

user3472810 · Angular@Output/EventEmitter返回undefined

9 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

9 月前