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

Question

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

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

css文件

 #foo {
    height: 200px
 }

js file

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

控制台显示：“”

样式必须位于不同的文件中，如果使用样式属性（style =“height = 200px”），则该样式有效。

Answer 1

你也可以考虑使用jquery，一个非常流行的javascript图书馆，有很多非常好的和强大的功能。如果您使用google cdn，则无需担心性能问题，因为大多数浏览器已经在缓存中使用了libray。

要获得元素的高度，您只需使用.height()完整说明在http://api.jquery.com/height/

您的代码看起来像这样：

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

一开始看起来有点令人困惑，但你会很快掌握它，你会用jquery更快更快地编写js。我永远不会没有它！

Answer 2

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

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