web-dev-qa-db-ja.com

Javascriptでページ上のオブジェクトの絶対位置を取得するにはどうすればよいですか？

Javascriptでページ上のオブジェクトの絶対X、Y位置を取得したい。これどうやってするの？

私は試した obj.offsetTopおよびobj.offsetLeft、しかしそれらは親要素に相対的な位置を与えるだけです。親のないオブジェクトに到達するまでループして、親のオフセットとその親のオフセットなどを追加できると思いますが、より良い方法があるはずです。グーグルはあまり現れず、SOサイト検索でも何も見つかりません。

また、jQueryを使用できません。

javascriptdomoffset
78
Kip
var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

（PrototypeJSから恥知らずに盗まれたメソッド。コードスタイル、変数名、および戻り値が変更され、無実を保護します）

113
eyelidlessness

element.getBoundingClientRect（） 。の使用をお勧めします

https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

概要

テキスト長方形のグループを囲むテキスト長方形オブジェクトを返します。

構文

var rectObject = object.getBoundingClientRect();

返却値

返される値は TextRectangle オブジェクトであり、これは getClientRects（） によって返される四角形の要素です。つまり、要素に関連付けられたCSS境界ボックスです。

返される値はTextRectangleオブジェクトです。このオブジェクトには、読み取り専用のleft、top、rightおよびbottomプロパティが含まれます。ビューポートの左上を基準とした左上のボックスのピクセル単位。

リンクされたMDNサイトから取得したブラウザー互換性テーブルを次に示します。

_+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+
_

広くサポートされており、本当に使いやすいだけでなく、非常に高速です。 John Resigの関連記事は次のとおりです。 http://ejohn.org/blog/getboundingclientrect-is-awesome/

次のように使用できます。

_var logo = document.getElementById('hlogo');
var logoTextRectangle = logo.getBoundingClientRect();

console.log("logo's left pos.:", logoTextRectangle.left);
console.log("logo's right pos.:", logoTextRectangle.right);
_

これは本当に簡単なの例です： http://jsbin.com/awisom/2 （コードを表示および編集できます） 「右上隅の「JS Binで編集」」をクリックします。

または、Chromeのコンソールを使用した別の方法を示します。 Using element.getBoundingClientRect() in Chrome

注意：

Internet Explorer 8では、getBoundingClientRect()メソッドの戻り値のwidthおよびheight属性はundefinedであることに言及する必要があります。Chrome 26.x、Firefox 20.x、Opera12.x。 IE8の回避策：widthの場合、戻り値の右および左の属性を減算でき、heightの場合、下および上属性を減算できます（ like this ） 。

126
Sk8erPeter