如何获取class name的每个元素的偏移位置？

Question

如何使用 classname 获取每个元素的顶部偏移位置？

我需要 return 每个 class 的值 .Me

(不能这次使用jQuery)

这就是我正在尝试的方式：

var list = document.querySelectorAll('.Me');

for (var i = 0; i < list.length; i++) {
    var me = document.getElementsByClassName('Me');
    console.log(me.offsetTop);
}

div,p { position: relative; }
div{ background:#ddd;}
.Me{ background:#7ae;}

<p>Content before container</p>
<div>
    <p>Space</p>
    <p>content</p>
    <p>padding</p>
    <p class="Me">Me 1</p>
    <p class="Me">Me 2</p>
    <p class="Me">Me 3</p>
</div>

Answer 1

您需要 select 列表中的每个元素，方法是 list[index]，如下所示：

var list = document.getElementsByClassName('Me');

for (var i = 0; i < list.length; i++) {
    var me = list[i];
    console.log(me.offsetTop);
}

div,p { position: relative; }
div{ background:#ddd;}
.Me{ background:#7ae;}

<p>Content before container</p>
<div>
    <p>Space</p>
    <p>content</p>
    <p>padding</p>
    <p class="Me">Me 1</p>
    <p class="Me">Me 2</p>
    <p class="Me">Me 3</p>
</div>

如何获取class name的每个元素的偏移位置？

How to get the offset position for each element of class name?

html

javascript

position

class

offset