html中rectangle坐标,在HTML5中获取x和y坐标

5 个答案:

答案 0 :(得分：2)

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

}

答案 1 :(得分：2)

纯Javascript方法

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

element.getBoundingClientRect 强>

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

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

答案 2 :(得分：1)

$('article').each(function(){

var position = $(this).position();

console.log("top: " + position.top + " left: " + position.left);

});

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

答案 3 :(得分：1)

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

答案 4 :(得分：0)

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