Get position off all divs

Question

I want get the the position (screen coordinates) of all divs in an iframe using javascript. No jQuery.

I can get all the divs in an array like this:

var arr = window.frames[0].document.getElementsByTagName("div");

Then i tried to do:

var arr = window.frames[0].document.getElementsByTagName("div").x;

But it didn't work. Console logs undefined. Any ideas?

score 2 · Accepted Answer · answered Feb 13 '14 at 13:50

Try with this:

var divs = window.frames[0].document.getElementsByTagName("div")
    i = 0, rects = [];
for (; i < divs.length; i++)
    rects.push(divs[i].getBoundingClientRect());

Now the array rects contains objects that define the position relative to the viewport of all your divs. Each of the elements will be something like this:

{
    top: ...,
    right: ...,
    bottom: ...,
    left: ...,
    width: ...,
    height: ...
}

Those properties are the number of pixel from each border (or the width or height).

IE6-8 don't report the width and height properties, though, but it's easy to compute them.

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

getElementsByTagName returns an array. The array object has no x property.

You will need to iterate over the members, collecting each value of x.

Furthermore (as pointed out in comments below), divs don't have an x property. See the question "Retrieve the position (X,Y) of an HTML element" for details on how to manage that.

edited May 23 '17 at 11:49

Community

1
1

answered Feb 13 '14 at 13:46

Paul Butcher

6,902
28
39

2

Each div won't have an x property either. – Matt Sach Feb 13 '14 at 13:47
is there any way i can do this without using jQuery .each. Using a loop or something? – Koiski Feb 13 '14 at 13:48
the word is offset...and the above answer is not an answer.its a comment – HIRA THAKUR Feb 13 '14 at 13:48
@MattSach That's true. I'll edit accordingly. – Paul Butcher Feb 13 '14 at 13:49

Get position off all divs

2 Answers2