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

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

css javascript

mcbeav · 技术社区 · 14 年前

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

Jason McCreary 14 年前

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

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

Cá´ÊÊ bcherry 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>

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

RicardO 14 年前

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

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

jebberwocky 14 年前

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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前