使用JavaScript讀取div的寬度

Question

我正在嘗試在沒有jQuery的情況下讀取div的寬度。 我使用的代碼是：

JS：

var windowwidth = parseInt(document.getElementById("window").style.width);
window.onload = function start() {
    alert(windowwidth);
}

HTML：

<div id="window">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS：

#window {
    height: 250px;
    margin: 0 auto;
    width: 600px;
}

我不明白為什么這行不通，我在整個網站和google上四處尋找，無法找到解決方案。 我不想為此使用jQuery（這是一個小的自定義HTML5腳本，因此我不需要一件事就擁有那個巨大的庫），即使當我嘗試使用jQuery方法時，它仍然無法正常工作。

Answer 1

您不能保證在DOM准備就緒之前document.getElementById()將起作用（即返回所需的元素）。 因此，請嘗試：

window.onload = function() { // removed the name to avoid some IE leaks
    var windowwidth = parseInt(document.getElementById("window").style.width);
    alert(windowwidth);
}

Answer 2

不閱讀style屬性，而是閱讀元素的實際寬度：

window.onload = function(){
    alert(document.getElementById('window').offsetWidth);
}

offsetWidth是瀏覽器所說的寬度，例如，如果內容將其拉伸得更寬，則可能與您使用CSS設置的寬度不同。

Answer 3

如果您想了解jQuery的工作方式，請參見以下鏈接： https : //github.com/jquery/jquery/blob/master/src/dimensions.js

Answer 4

我會用jQuery來做這樣的事情。 您可以在此處找到所需的確切內容： http : //api.jquery.com/width/

Answer 5

僅在繪制元素后才能獲得style.width。 嘗試將您的代碼放入setTimeout（）。 有時候對我有幫助

window.onload = function(){
    setTimeout(
       function(){ alert(document.getElementById('window').style.width); },
       200
    );
}