使用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
    );
}