Получить координату x и y в HTML5

Question

У меня есть section и article для отображения содержимого. Мой код:

<section id = "examples"> 

<article id="item_1"> 
    ... 
</article> 

<article id="item_2"> 
    ... 
</article> 

<article id="item_3"> 
    ... 
</article> 

<article id="item_4"> 
    ... 
</article> 

... 

</section> 

Как я могу получить х и у координаты всех в articles?

Answer 1

Вы можете сделать это с помощью JQuery position или offset:

$('article').each(function(){ 
    var position = $(this).position(); 
    console.log("top: " + position.top + " left: " + position.left); 
}); 

LIVING DEMO

Примите во внимание, что position является относительно документа и offset вычисляет координаты относительно родительского смещения элемента.

Answer 2

легко сделать с JQuery

$('article').each(function() { 
    var element = $(this); 
    var position = element.position(); 
    console.log("left: " + position.left + ", top: " + position.top); 
} 

вы можете использовать вместо чистого JS, как @koningdavid указал, таким же образом

var elements = document.getElementsByTagName('article'); 
for(var i = 0; i < elements.length; i++) 
{ 
    var element = elements[i].getBoundingClientRect(); 
    console.log("left: " + element.left + ", top: " + element.top); 
} 

Live: http://jsfiddle.net/HMHbE/1/

Answer 3

Я хотел бы попробовать это в javascript:

// element is each article 
// then you can use element.top and element.left for the x and y 
var element = document.getElementById('Item_1'); 
var ele = element.getBoundingClientRect();: 

Answer 4

Чистый JavaScript метод

document.querySelector('#item_1').getBoundingClientRect() // for example for #item_1 

element.getBoundingClientRect

Возвращаемое значение является объектом TextRectangle который является объединением прямоугольников, возвращенных getClientRects() для элемента, т.е. CSS пограничные коробки связанный с элементом.

Возвращаемое значение - это объект TextRectangle, который содержит только свойства только для чтения слева, сверху, справа и снизу, описывающие рамку в пикселях, слева вверху относительно левого верхнего угла окна просмотра.

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Answer 5

Вы можете использовать getBoundingClientRect() Javascript функция

var div = document.getElementById("item_1"); 
var position = div.getBoundingClientRect(); 
alert("Coordinates: " + position.left + "px," + position.right+"px,"+ position.top + "px," + position.bottom + "px");