获取 div 元素的 X 和 Y 坐标

Question

我一直在尝试编写一个 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 循环来保持元素移动，但是我想知道如何让那个 while 循环运行。任何提示和建议都将不胜感激。

- Jeffrey Klinkhamer

---

你不应该在一个问题中问两个问题。请单独提出拖放的问题。 - katspaugh

Answer 1

目前为止，获取元素在屏幕上的绝对位置最简单的方法是使用getBoundingClientRect函数。

var element = document.getElementById('some-id');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;
// Et voilà!

请注意，这些坐标不包括文档滚动偏移量。

- katspaugh

---

看起来getBoundingClientRect是在Firefox 3中引入的：https://developer.mozilla.org/en/DOM/element.getBoundingClientRect - 我一直使用quirksmode方法。它更兼容 :) - sole

Answer 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;

- Thariama

Answer 3

你需要使用父元素的位置来找到位置。这里有一个非常好的教程：http://www.quirksmode.org/js/findpos.html

- sole

Answer 4

给定元素...

<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”的格式。

- user4723924

Answer 5

我认为你可以使用jQuery .offset() http://api.jquery.com/offset/

- snies

---

这个问题没有标记jQuery！ - user1150525