DOM要素の境界ボックス（ピクセル単位）を取得する方法はありますか？

Question

DOM要素のバウンディングボックスの座標をJavascriptで取得する方法はありますか？

もちろん、さまざまなCSSプロパティ（width、heightなど）から計算できます。

これは方法としてこれを提供する他の多くのグラフィカルプラットフォームがあるので私は尋ねています。例えば、this postとしてXULで行うことができます。これは、方法getBoundingClientRect()を記述しています。

（私の目標は、二つの要素が重なるかどうかを確認することです。）

Answer 1

のは、あなたのDOM要素はID myElementを持っていたとしましょう。

document.getElementById("myElement").offsetLeft; //Left side of box 
document.getElementById("myElement").offsetTop; //Top side of box 
document.getElementById("myElement").offsetLeft 
    + document.getElementById("myElement").offsetWidth; //Right side of box 
document.getElementById("myElement").offsetTop 
    + document.getElementById("myElement").offsetHeight; //Bottom side of box 

底部と右側のコードでは、基本的に境界ボックスの幅または高さが左側または上側に追加されます。あなたがしたい場合、あなたは一度document.getElementById("myElement")を定義することができ、次のように、参照を使用

：

var myElement = document.getElementById("myElement"); 
myElement.offsetLeft; //Left side of box 
myElement.offsetTop; //Top side of box 
myElement.offsetLeft + myElement.offsetWidth; //Right side of box 
myElement.offsetTop + myElement.offsetHeight; //Bottom side of box 

Answer 2

実際には、境界の矩形を取得するための組み込みメソッドがあります：Element.getBoundingClientRect

メソッドは、要素の（視覚的な）上端、右端、下端、左端の座標、およびその幅と高さを含むオブジェクトを返します。

Example (JSFiddle)

さらに詳しい情報：

• Element.getBoundingClientRect
• getBoundingClientRect is Awesome (John Resig)