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？

的x和y坐标

Answer 1

易于使用jQuery

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

你可以使用@koningdavid以相同的方式使用纯粹的js

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/

Answer 2

纯Javascript方法

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

<强> element.getBoundingClientRect

返回的值是一个TextRectangle对象，它是getClientRects（）为元素返回的矩形的并集，即与元素关联的CSS边框。

返回的值是一个TextRectangle对象，它包含描述border-box的只读左，上，右和底属性，以像素为单位，左上角相对于视口的左上角。

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

Answer 3

您可以使用position或offset

来使用jQuery

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

LIVING DEMO

考虑position相对于文档而offset计算相对于父偏移元素的坐标。

Answer 4

我会在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 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" );

在HTML5中获取x和y坐标

5 个答案: