Вход

Просмотр полной версии : Обработка одинаковых классов

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,

#коллекции-не-массивы (https://learn.javascript.ru/traversing-dom#коллекции-не-массивы)
<!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>