Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Обработка одинаковых классов (https://javascript.ru/forum/misc/68719-obrabotka-odinakovykh-klassov.html)

RunBust 04.05.2017 21:55
Обработка одинаковых классов
 
Вкратце: Есть 3 блока с одинаковыми классами, возможно ли получить координаты каждого блока отдельно?

Вот код:

<html>
 <head>

<meta charset="utf-8">
 </head>
 <body>

 <div class="block">БЛОК 1</div>
<br>
  <div class="block">БЛОК 2</div>
<br>
<br>
   <div class="block">БЛОК 3</div>
<br>
	  <script>

// получаем координату Y первого блока 

 var block = document.querySelector('.block');
 var br = block.getBoundingClientRect();
 alert(br.top + window.pageYOffset);


  </script>
 
 </body>
</html>

рони 04.05.2017 21:59
RunBust,
что мешает циклом по блокам пройти?

RunBust 05.05.2017 09:10
Как? Ведь метод "document.querySelector('.block')" всегда возвращает только первый блок.

рони 05.05.2017 09:38
RunBust,
querySelectorAll :-?

рони 05.05.2017 09:50
RunBust,

#коллекции-не-массивы
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call( document.querySelectorAll('.block'), function(block) {
 var br = block.getBoundingClientRect();
 alert(br.top + window.pageYOffset);

});
    });
  </script>
</head>

<body>
<div class="block">БЛОК 1</div>
<br>
  <div class="block">БЛОК 2</div>
<br>
<br>
   <div class="block">БЛОК 3</div>
<br>


</body>
</html>


Часовой пояс GMT +3, время: 11:37.