获取 div 元素的 X 和 Y 坐标
Posted
技术标签:
【中文标题】获取 div 元素的 X 和 Y 坐标【英文标题】:getting the X and Y coordinates for a div element 【发布时间】:2012-05-13 19:06:39 【问题描述】:我一直在尝试制作一个 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;
现在的问题是。假设这些是函数返回的准确坐标是否合理,或者是否可以轻松地在该位置生成一些东西以查看它到底是什么?
最后我将如何让这个div
元素移动?我知道我应该使用 mousedown
事件处理程序和一段时间来继续移动元素,但是非常感谢任何提示/提示我最关心的是如何让 while 循环运行。
【问题讨论】:
你不应该同时问两个问题。单独提出拖放问题。 【参考方案1】:到目前为止,获取元素绝对屏幕位置的最简单方法是getBoundingClientRect
。
var element = document.getElementById('some-id');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;
// Et voilà!
但请记住,坐标don’t include the document scroll offset。
【讨论】:
似乎 getBoundingClientRect 是在 Firefox 3 中引入的:developer.mozilla.org/en/DOM/element.getBoundingClientRect - 我一直使用 quirksmode 方法。它更兼容:)【参考方案2】:这里有一个简单的方法来获取有关 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;
【讨论】:
【参考方案3】:您也需要使用父母的位置来找到位置。这里有一个很好的教程:http://www.quirksmode.org/js/findpos.html
【讨论】:
【参考方案4】:我认为你可以使用 jQuery .offset() http://api.jquery.com/offset/
【讨论】:
该问题未标记 jQuery!【参考方案5】:给定元素...
<div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div>
如果元素在主文档中,您可以通过...获取 DIV 的坐标
var X=window.getComputedStyle(abc,null).getPropertyValue('left');
var Y=window.getComputedStyle(abc,null).getPropertyValue('top');
如果元素在 iframe 中,您可以通过...获取 DIV 的坐标
var X=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('left');
var Y=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('top');
注意:返回值的格式应为“190px”和“350px”。
【讨论】:
以上是关于获取 div 元素的 X 和 Y 坐标的主要内容,如果未能解决你的问题,请参考以下文章