javascript - 触发window.onload时未加载css样式

Question

这是我的问题：触发 window.onload 时未初始化 css 样式。

 <div id="foo"></div>

css 文件

 #foo {
    height: 200px
 }

js文件

window.onload = function(){
     console.log(document.getElementById('foo').style.height);
};

控制台显示：“”

样式必须在不同的文件中，如果使用样式属性 (style="height=200px") 它可以工作。

score 6 · Accepted Answer

.style.height不显示来自 CSS 规则的样式。它只返回已在该对象上显式设置的样式，无论是在 HTML 中还是通过 javascript，而不是从 CSS 规则继承的样式。

相反，您必须使用window.getComputedStyle(). 有关如何正确使用的更多详细信息，请参阅MDN 文档getComputedStyle()。这是一个例子：

window.getComputedStyle(document.getElementById('foo'),null).getPropertyValue("height");

注意：对于旧版本的 IE，您必须安装 polyfillgetComputedStyle或使用el.currentStyle.

score 1 · Accepted Answer

Element.style 只会为内联样式（）设置，使用window.getComputedStyle<div id="foo" style="height: 200px"></div>来获取计算的样式

window.getComputedStyle(document.getElementById("foo"), null).getPropertyValue('height')

score 0 · Accepted Answer

您真正想要的是 offsetHeight 或 clientHeight。尝试这个：

window.onload = function(){
 console.log(document.getElementById('foo').offsetHeight);
};

score 0 · Accepted Answer

您还可以考虑使用 jquery，这是一个非常流行的 javascript 库，具有大量非常好的和强大的功能。而且，如果您使用google cdn，则无需担心性能，因为大多数浏览器已经在缓存中包含 libray。

要获取元素的高度，您只需使用.height()完整的解释在这里http://api.jquery.com/height/

您的代码将如下所示：

$(document).ready(function() {
  console.log($('#foo).height());
});

起初它可能看起来有点混乱，但你很快就会掌握它的窍门，你会用 jquery 更快、更紧凑地编写 js。我永远不会没有它！

4 回答 4