2

純粋な JavaScript で画面の実際の座標 (上と左) を取得する方法は?

私が見つけたメソッドは、親要素の再帰を使用して座標を計算しますが、 here、here、およびhereのように、すべての Web ページをカバーしていないようです。

4

1 に答える 1

9

私は長い間ネットを閲覧して、JavaScriptライブラリを使用しないソリューションを見つけました.すべての回答がjQueryメソッドを使用するようにアドバイスしていたので、.offset()このメソッドをコピーして小さな純粋なJavaScriptoffset()関数を作成することにしました同じこと：

function isWindow( obj ) {
    return obj != null && obj === obj.window;
}
function getWindow( elem ) {
    return isWindow( elem ) ? elem : elem.nodeType === 9 && elem.defaultView;
}
function offset( elem ) {

    var docElem, win,
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;

    docElem = doc.documentElement;

    if ( typeof elem.getBoundingClientRect !== typeof undefined ) {
        box = elem.getBoundingClientRect();
    }
    win = getWindow( doc );
    return {
        top: box.top + win.pageYOffset - docElem.clientTop,
        left: box.left + win.pageXOffset - docElem.clientLeft
    };
};

このページでそれを試すことができます (ページの下部にある回答領域にある要素を取り上げます。他の方法が失敗するのはそこであるためです)、コンソールで実行します。

offset(document.getElementById('wmd-input')).top == $('#wmd-input').offset().top

あなたが本当なら、これはそれが機能することを意味します;-)

于 2013-08-26T20:18:04.143 に答える