獲取HTML5中的x和y座標

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> 

我怎樣才能得到x和所有articles的Y座標？

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

現場指出：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對象，它是用於該元素，即，CSS邊界盒（）由getClientRects返回的矩形的聯合與元素相關聯。

返回的值是一個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");