javascript div容器宽度调整大小问题

Question

嘿，我在尝试调整div容器的宽度时遇到问题。 我真的不知道为什么它不起作用...谢谢。

代码如下：它确实适用于Google Chrome。 但是，使用IE或Firefox将无法正常工作。

<div id="div1" style="position:relative; background-color:#000000; width:100px; height:20px; color:#ffffff; text-align:center;">
    <div id="div2" style="position:absolute; background-color:#00ff00; left:0px; top:0px; bottom:0px; width:10px; text-align:right;">
    </div>
</div>

<script>
var container = document.getElementById("div1");
container.style.width = '300px';
</script>

Answer 1

您对document.getElementById()调用来得很早。 您的元素在DOM上不可用。 也许Chrome可以更快地添加元素（？）。

您不应该依赖脚本在源代码中的位置。 请改用onload()处理函数。

用以下内容替换脚本标签的内容，它应该可以工作。

window.onload = function() {
    var container = document.getElementById("div1");
    container.style.height = '100px';
}

Answer 2

您需要将所有内容都放在body标记中，以使javascript正常工作（document.getElementById）：

<body>

<div id="div1" style="position:relative; display:block; background-color:#000000; width:100px; height:20px; color:#ffffff; text-align:center;">
    <div id="div2" style="position:absolute; background-color:#00ff00; left:0px; top:0px; bottom:0px; width:10px; text-align:right;">
    </div>
</div>

<script>
var container = document.getElementById("div1");
container.style.width = '300px';
</script>

</body>

Answer 3

@ hacksteak25有答案，但是如果您想将处理程序附加到load事件（或大多数其他事件）上，而不仅仅是快速的hack，那么您应该使用DOM / IE API添加事件处理程序：

function() init{
    var container = document.getElementById("div1");
    container.style.height = '300px';
}

if (window.addEventListener)
    window.addEventListener("load", init, false);
else if (window.attachEvent)
    window.attachEvent("onload", init);

javascript div容器宽度调整大小问题

问题描述

3 个解决方案

解决方案1
1 2010-09-07 17:00:30

解决方案2
0 2010-09-07 16:58:03

解决方案3
0 2010-09-07 17:20:39

javascript div容器宽度调整大小问题

问题描述

3 个解决方案

解决方案1 1 2010-09-07 17:00:30

解决方案2 0 2010-09-07 16:58:03

解决方案3 0 2010-09-07 17:20:39

解决方案1
1 2010-09-07 17:00:30

解决方案2
0 2010-09-07 16:58:03

解决方案3
0 2010-09-07 17:20:39