How can I get the top offset position for each element using classname?

I need to return a value for each class named .Me

(Can't use jQuery this time)

This is how I am trying to do it:

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>

How can I get the top offset position for each element using classname?

I need to return a value for each class named .Me

(Can't use jQuery this time)

This is how I am trying to do it:

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>

• javascript
• html
• class
• position
• offset

1 Answer 1

You need to select each element of your list by doing list[index] like so:

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>