Question

嘿伙计们，我试图调整div容器的宽度时遇到问题。我真的不知道为什么它不起作用...... 谢谢回应。

这是代码：它真的适用于谷歌浏览器。但是使用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()处理程序。

使用以下内容替换script-tag的内容，它应该可以正常工作。

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事件（或大多数其他事件），而不是快速入侵，则应使用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 个答案: