Looping through each element and logging the height

Question

I want to be able to log the height of each of the .slide-text-overlay elements, but no value seems to be showing. The simple for of loop should loop through each class and just log the html of that class and then the height - but the height isn't logging; instead, just an empty line in the console.

Any ideas what I'm doing wrong here? Thanks for any help

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>

oops yes I meant '.overlay', but still the problem is exactly the same (I've updated the demo btw) - it just logs as ''" - https://codepen.io/anon/pen/arNJJw?editors=1111 — user8758206, May 10 '19 at 09:57
Try `overlay.getBoundingClientRect().height` instead of `overlay.style.height` — Dmytro Huz, May 10 '19 at 09:58
`overlay.clientHeight` [How do you get the rendered height of an element?](https://stackoverflow.com/a/28155507/3082296) — adiga, May 10 '19 at 09:59

Wimanicesir · Accepted Answer · 2019-05-10T10:08:44.517

Use the offset Height in 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>

Documentation: https://www.w3schools.com/jsref/prop_element_offsetheight.asp

score 1 · Answer 2 · answered May 10 '19 at 09:53

The class in the querySelector should be overlay

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>

score 0 · Answer 3 · answered May 10 '19 at 09:54

0

Try this:

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

answered May 10 '19 at 09:54

maryrio7

310
3
18

Looping through each element and logging the height

3 Answers3