Recorriendo cada elemento y registrando la altura

Question

Quiero poder registrar la altura de cada uno de los elementos .slide-text-overlay, pero parece que no se muestra ningún valor. El bucle for for simple debe recorrer cada clase y simplemente registrar el html de esa clase y luego la altura, pero la altura no se registra; en cambio, solo una línea vacía en la consola.

¿Alguna idea de lo que estoy haciendo mal aquí? Gracias por cualquier ayuda

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>

javascript

0

user8758206 10 may. 2019 a las 12:52

Answer 1

Utilice la altura de desplazamiento en 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>

Documentación: https://www.w3schools.com/jsref/prop_element_offsetheight.asp

2

Wimanicesir 10 may. 2019 a las 10:08

Answer 2

Prueba esto:

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

0

maryrio7 10 may. 2019 a las 09:54

Answer 3

La clase en querySelector debe estar superpuesta

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>

1

ellipsis 10 may. 2019 a las 09:53

Recorriendo cada elemento y registrando la altura

3 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

javascript