JavaScript で DOM 要素の絶対座標を取得する方法

phi phi on javascript

備忘録.
スペニット的に使ってもらえれば幸いです.

DOM 要素の絶値座標を取得する

element.scrollTop とかだと親からの相対値になっちゃいます.
getBoundingClientRect() を使えば絶対座標を取得できます.

window.onload = function() {  
    var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する
    var rect = element.getBoundingClientRect();
    console.log(rect.left);   // x座標(絶対座標)
    console.log(rect.top);    // y座標(絶対座標)
    console.log(rect.width);  // 幅
    console.log(rect.height); // 高さ
}

実際の動作はこちらで確認できます.

[runstant]

スクロールも考慮した絶対座標を取得する

@simiraaaa さんから指摘して頂いたので追記.

上記の方法だとスクロールした場合に座標がズレてしまいます. そこで scroll の値も足すことでスクロール後の絶対座標を取得することができます.

スクロールの値は window.pageXOffset, window.pageYOffset でx座標, y座標それぞれ取得できます.

        box.onclick = function() {
            var rect = this.getBoundingClientRect();
            console.log(rect.left + window.pageXOffset);   // x座標(絶対座標)
            console.log(rect.top + window.pageYOffset);    // y座標(絶対座標)
        };

下記リンクで実際に動作確認できます. box をクリックするとそのボックスの座標が console に表示されるのが
わかるかと思います.

[runstant]

上のが fixed なのに対しこっちは absolute って感じですかね.