web-dev-qa-db-ja.com

div要素のX座標とY座標を取得する

私はdiv要素のX座標とY座標を取得するJavaScriptを作成しようとしています。いくつか試してみたところ、いくつかの数値が出てきましたが、それらの正確な場所を検証する方法がわかりません（スクリプトはXを168として、Yを258として返します）画面解像度1280でスクリプトを実行していますx800。これは、この結果を得るために使用するスクリプトです。

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イベントハンドラーとしばらく使用して要素を移動し続ける必要があることはわかっていますが、そうです、ヒントやヒントは非常に高く評価されています。

javascriptdrag-and-drop
13
Jeffrey Klinkhamer

ここでは、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;
7
Thariama

要素の絶対的な画面位置を取得する最も簡単な方法は、 getBoundingClientRect です。

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

ただし、座標 ドキュメントのスクロールオフセットは含めない であることに注意してください。

27
katspaugh

親の位置も使用して位置を見つける必要があります。ここに非常に良いチュートリアルがあります： http://www.quirksmode.org/js/findpos.html

2
sole

JQuery .offset（） http://api.jquery.com/offset/ を使用できると思います

1
snies

与えられた要素...

<div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div>

要素がmain documentにある場合、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」の形式にする必要があります。

0
user4723924