У меня есть 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>
Как я могу получить координаты x и y всех articles?
Вы можете сделать это с помощью jQuery, используя position или offset:
$('article').each(function(){
var position = $(this).position();
console.log("top: " + position.top + " left: " + position.left);
});
Учтите, что position относится к документу, а offset вычисляет координаты относительно родительского элемента смещения.
Легко сделать с 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 );
}
Прямой эфир: http://jsfiddle.net/HMHbE/1/
Чистый метод Javascript
document.querySelector('#item_1').getBoundingClientRect() // for example for #item_1
element.getBoundingClientRect
Возвращаемое значение представляет собой объект TextRectangle, представляющий собой объединение прямоугольников, возвращаемых функцией getClientRects() для элемента, т. е. рамок CSS, связанных с элементом.
Возвращаемое значение представляет собой объект TextRectangle, который содержит доступные только для чтения свойства left, top, right и bottom, описывающие рамку в пикселях с верхним левым относительно верхнего левого края области просмотра.
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
Я бы попробовал это в 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();:
Вы можете использовать функцию javascript getBoundingClientRect()
var div = document.getElementById("item_1");
var position = div.getBoundingClientRect();
alert("Coordinates: " + position.left + "px," + position.right+"px,"+ position.top + "px," + position.bottom + "px" );
