備忘録.
スペニット的に使ってもらえれば幸いです.
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); // 高さ
}
実際の動作はこちらで確認できます.
スクロールも考慮した絶対座標を取得する
@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 に表示されるのが
わかるかと思います.
上のが fixed なのに対しこっちは absolute って感じですかね.