遍历每个元素并记录高度

Question

我希望能够记录每个.slide-text-overlay元素的高度，但是似乎没有显示任何值。 简单的for循环应该遍历每个类，只记录该类的html，然后记录高度-但高度不记录； 而是在控制台中只是一个空行。

有任何想法我在这里做错了吗？ 谢谢你的帮助

 var overlays = document.querySelectorAll('.overlay'); for (let overlay of overlays) { console.log(overlay); console.log(overlay.style.height); } 

 .overlay:first-of-type { color: red; width: 100px; height: 50px; background: orange; } .overlay:nth-of-type(2) { color: blue; width: 100px; height: 75px; background: pink; } 

 <div class='overlay'> overlay 1 </div> <div class='overlay'> overlay 2 </div> 

Answer 1

在JS中使用偏移高度

 var overlays = document.querySelectorAll('.overlay'); for (var i=0; i < overlays.length; i++) { console.log(overlays[i].offsetHeight) } 

 .overlay:first-of-type { color: red; width: 100px; height: 50px; background: orange; } .overlay:nth-of-type(2) { color: blue; width: 100px; height: 75px; background: pink; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='overlay'> overlay 1 </div> <div class='overlay'> overlay 2 </div> 

说明文件： https : //www.w3schools.com/jsref/prop_element_offsetheight.asp

Answer 2

querySelector中的类应该覆盖

 var overlays = document.querySelectorAll('.overlay'); for (let overlay of overlays) { console.log(overlay); console.log(overlay.style.height); } 

 .overlay:first-of-type { color: red; width: 100px; height: 50px; background: orange; } .overlay:nth-of-type(2) { color: blue; width: 100px; height: 75px; background: pink; } 

 <div class='overlay'> overlay 1 </div> <div class='overlay'> overlay 2 </div> 

Answer 3

尝试这个：

var overlays = document.getElementsByClass('.overlay');
for (let overlay of overlays) {
  console.log(overlay);
  console.log(overlay.style.height);
}