获取 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 坐标的主要内容,如果未能解决你的问题,请参考以下文章

如何用JS 获取DIV的坐标位置

jquery 获取鼠标和元素的坐标点

javascript获取窗口和div位置

UIAutomation 是不是可以使用 x 和 y 坐标获取元素名称

如何用JS 获取DIV的坐标位置?

jquery获取元素坐标获取鼠标坐标