Javascript 获取 div 元素的 X 和 Y 坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10445410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting the X and Y coordinates for a div element
提问by Jeffrey Klinkhamer
I've been trying to make a javascript to get a X and Y coordinates of a divelement. After some trying around I have come up with some numbers but I'm not sure how to validate the exact location of them(the script returns the X as 168 and Y as 258) I'm running the script with a screen resolution of 1280 x 800. This is the script I use to get this result:
我一直在尝试制作一个 javascript 来获取div元素的 X 和 Y 坐标。经过一番尝试后，我想出了一些数字，但我不确定如何验证它们的确切位置（脚本返回 X 为 168，Y 为 258）我正在以 1280 的屏幕分辨率运行脚本x 800。这是我用来得到这个结果的脚本：
function get_x(div) {
var getY;
var element = document.getElementById("" + div).offsetHeight;
var get_center_screen = screen.width / 2;
document.getElementById("span_x").innerHTML = element;
return getX;
}
function get_y(div) {
var getY;
var element = document.getElementById("" + div).offsetWidth;
var get_center_screen = screen.height / 2;
document.getElementById("span_y").innerHTML = element;
return getY;
}?
Now the question is. Would it be reasonable to assume that these are accurate coordinates returned by the function or is there an easy to to just spawn a little something on that location to see what exactly it is?
现在的问题是。假设这些是函数返回的准确坐标是否合理，或者是否可以轻松地在该位置生成一些东西以查看它到底是什么？
And finally how would I go about making this divelement move? I know I should use a mousedownevent handler and a while to keep moving the element but yeah any tips/hints are greatly appreciated my biggest concern is to how to get that while loop running.
最后我将如何让这个div元素移动？我知道我应该使用mousedown事件处理程序和一段时间来继续移动元素，但是非常感谢任何提示/提示，我最关心的是如何让 while 循环运行。
采纳答案by Thariama
Here a simple way to get various information regarding the position of a html element:
这是获取有关 html 元素位置的各种信息的简单方法：
var my_div = document.getElementById('my_div_id');
var box = { left: 0, top: 0 };
try {
box = my_div.getBoundingClientRect();
}
catch(e)
{}
var doc = document,
docElem = doc.documentElement,
body = document.body,
win = window,
clientTop = docElem.clientTop || body.clientTop || 0,
clientLeft = docElem.clientLeft || body.clientLeft || 0,
scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
回答by katspaugh
By far, the easiest way to get the absolute screen position of an element is getBoundingClientRect.
到目前为止，获取元素绝对屏幕位置的最简单方法是getBoundingClientRect.
var element = document.getElementById('some-id');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;
// Et voilà!
Keep in mind, though, that the coordinates don't include the document scroll offset.
但请记住，坐标不包括文档滚动偏移量。
回答by sole
You need to find the position using the parent's position too. There's a very good tutorial here: http://www.quirksmode.org/js/findpos.html
您也需要使用父母的位置来找到位置。这里有一个非常好的教程：http: //www.quirksmode.org/js/findpos.html
回答by snies
I think you could use jQuery .offset() http://api.jquery.com/offset/
我想你可以使用 jQuery .offset() http://api.jquery.com/offset/
回答by user4723924
Given the element...
鉴于元素...
<div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div>
If the element is in the main documentyou can get the DIV's coordinates with...
如果元素在主文档中，您可以使用以下命令获取 DIV 的坐标...
var X=window.getComputedStyle(abc,null).getPropertyValue('left');
var Y=window.getComputedStyle(abc,null).getPropertyValue('top');
If the element is in an iframeyou can get the DIV's coordinates with...
如果元素在iframe 中，您可以使用以下命令获取 DIV 的坐标...
var X=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('left');
var Y=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('top');
NB: The returned values should be in the format "190px" and "350px".
注意：返回值的格式应为“190px”和“350px”。
