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