19

要素のX座標とY座標を取得するJavaScriptを作成しようとしていdivます。いくつか試してみた後、いくつかの数字を思いついたが、それらの正確な位置を検証する方法がわからない（スクリプトは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要素を動かし続けるためにイベントハンドラーとしばらく使用する必要があることはわかっていますが、ヒント/ヒントは非常に高く評価されています。私の最大の関心事は、ループの実行中にそれを取得する方法です。

4

5 に答える 5

36

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

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

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

于 2012-05-04T08:47:55.877 に答える
11

ここでは、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;
于 2012-05-04T08:50:06.843 に答える
2

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

于 2012-05-04T08:36:43.393 に答える
1

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

于 2012-05-04T08:39:37.437 に答える
0

与えられた要素...

<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」の形式である必要があります。

于 2017-12-03T12:47:14.090 に答える