Javascript 在HTML5中获取x和y坐标

我有显示内容的章节和文章。我的代码是：

<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坐标？

您可以使用jQuery或：

考虑到位置是相对于文档的，偏移量计算相对于父偏移量元素的坐标

使用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 );
}

---

Live:

我会尝试使用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方法

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

element.getBoundingClientRect

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

返回的值是TextRectangle对象，该对象包含只读的左、上、右和下属性，以像素为单位描述边框框，左上角相对于视口的左上角

---

您可以使用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" );

---

JQuery可以接受吗？@Jacek它被JQuery标记@Jacek在他的tagsAhahaha上，thx:。很抱歉忽略了这一点：。您仍然需要循环阅读这些文章。

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