新JavaScript例文辞典

エレメントの絶対座標値を取得する (getBoundingClientRect)

説明

エレメントの絶対座標値を取得するにはgetBoundingClientRect()を使います。戻り値はオブジェクトで左の座標値はleft、上の座標値はtopプロパティに入ります。座標値は小数値になります。また、スクロール量は加算されません。getBoundingClientRect()はFirefox 3以降およびIEで使うことができます。

サンプルプログラム

window.onload = function(){
var ele = document.getElementById("myBox");
var bounds = ele.getBoundingClientRect();
var x = bounds.left;
var y = bounds.top;
document.getElementById("result").innerHTML = "("+x+","+y+")";
}
サンプルを実行
[戻る]