Форум

RunBust · #1 (**permalink**) 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>

рони · #2 (**permalink**) 04.05.2017, 21:59

RunBust,
что мешает циклом по блокам пройти?

RunBust · #3 (**permalink**) 05.05.2017, 09:10

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

рони · #4 (**permalink**) 05.05.2017, 09:38

RunBust,
querySelectorAll

рони · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript