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事件处理程序和一段时间来继续移动元素但是任何提示/提示都非常感谢我最关心的是如何在循环运行时获得它。

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

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;

Answer 3

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

Answer 4

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

Answer 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坐标

5 个答案: