web-dev-qa-db-ja.com

DOMオブジェクトのjQuery x yドキュメント座標

DOM要素のX、Y座標（ドキュメントの上部/左を基準とする）を取得する必要があります。プラグイン、jQueryプロパティ、またはこれらを提供できるメソッドを見つけることができません。 DOM要素の上部と左側を取得できますが、それは現在のコンテナ/親またはドキュメントに関連する可能性があります。

javascriptjqueryuser-interfacelocation
49
DMCS

Dimensions pluginを使用できます [非推奨... jQuery 1.3.2+に含まれています]

offset（）
最初の一致した要素の現在のオフセットを、documentを基準にしてピクセル単位で取得します。

position（）
offset parentを基準にした要素の左上位置を取得します。

これを知っていれば、それは簡単です...（私の小さな svgプロジェクト を サンプルページ として使用）

var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;

console.log('x: ' + x + ' y: ' + y);

出力：

x: 53 y: 177

あなたが探しているものに役立つことを願っています。

これはoffset（）とposition（）の画像です

XRay を使用

alt text

Web Developer ツールバーを使用

alt text

92
balexandre

私の解決策は、「回避策」：+ Dを備えたプラグインです。しかし動作します！

jQuery.fn.getPos = function(){
        var o = this[0];
        var left = 0, top = 0, parentNode = null, offsetParent = null;
        offsetParent = o.offsetParent;
        var original = o;
        var el = o;
        while (el.parentNode != null) {
            el = el.parentNode;
            if (el.offsetParent != null) {
                var considerScroll = true;
                if (window.opera) {
                    if (el == original.parentNode || el.nodeName == "TR") {
                        considerScroll = false;
                    }
                }
                if (considerScroll) {
                    if (el.scrollTop && el.scrollTop > 0) {
                        top -= el.scrollTop;
                    }
                    if (el.scrollLeft && el.scrollLeft > 0) {
                        left -= el.scrollLeft;
                    }
                }
            }            
            if (el == offsetParent) {
                left += o.offsetLeft;
                if (el.clientLeft && el.nodeName != "TABLE") {
                    left += el.clientLeft;
                }
                top += o.offsetTop;
                if (el.clientTop && el.nodeName != "TABLE") {
                    top += el.clientTop;
                }
                o = el;
                if (o.offsetParent == null) {
                    if (o.offsetLeft) {
                        left += o.offsetLeft;
                    }
                    if (o.offsetTop) {
                        top += o.offsetTop;
                    }
                }
                offsetParent = o.offsetParent;
            }
        }
        return {
            left: left,
            top: top
        };
    };

使用法：

var p = $("#wrapper2").getPos();
alert("top:"+p.top+"; left:"+p.left);
7
EderBaum

offset 関数がそれを行います。

以下に例を示します。

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
4
Jeff Davis