Перебор каждого элемента и регистрация высоты

Я хочу иметь возможность регистрировать высоту каждого из элементов .slide-text-overlay, но, похоже, значение не отображается. Простой цикл for of должен проходить через каждый класс и просто регистрировать html этого класса, а затем высоту, но высота не регистрируется; вместо этого просто пустая строка в консоли.

Любые идеи, что я делаю неправильно здесь? Спасибо за любую помощь

var overlays = document.querySelectorAll('.overlay');
for (let overlay of overlays) {
  console.info(overlay);
  console.info(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>

В вашей разметке нет класса slide-text-overlay.

— 10.05.2019 11:53

упс, да, я имел в виду '.overlay', но проблема та же самая (кстати, я обновил демо) - она просто регистрируется как ''" - codepen.io/anon/pen/arNJJw?editors=1111

— 10.05.2019 11:57

Попробуйте overlay.getBoundingClientRect().height вместо overlay.style.height

— 10.05.2019 11:58

overlay.clientHeightКак получить отображаемую высоту элемента?

— 10.05.2019 11:59

спасибо обоим - оба заработали

— 10.05.2019 12:05

javascript

10.05.2019 11:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

262

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Класс в querySelector должен быть оверлейным

var overlays = document.querySelectorAll('.overlay');
for (let overlay of overlays) {
  console.info(overlay);
  console.info(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>

10.05.2019 11:53

Попробуй это:

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

10.05.2019 11:54

Ответ принят как подходящий

Используйте высоту смещения в JS

var overlays = document.querySelectorAll('.overlay');
for (var i=0; i < overlays.length; i++) {
  console.info(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>