ページ要素の位置を取得するJavaScript getBoundingClientRect()のコード【改訂版】ページ1/2_JavaScriptスキル

document.documentElement.getBoundingClientRect
MSDN の説明は次のとおりです。
構文
oRect = object.getBoundingClientRect()戻り値
各四角形には 4 つの整数プロパティ (top 、
解説
このメソッドは、長方形の結合の左、上、右、下の座標をピクセル単位で表します。 Microsoft Internet Explorer 5 では、ウィンドウの左上隅は、実際のクライアントに対して 2,2 (ピクセル) になります。
実際の説明のために、このメソッドはページ上の要素の値を取得します。左、上、右、下はそれぞれブラウザ ウィンドウに対する相対的な位置です。これもわかりにくいので、下の図で説明します。
このメソッドは IE のみでなくなりました。FF3.0 と Opera9.5 はすでにこのメソッドをサポートしています。Opera と Firefox の以前のバージョンでは、ページ要素の位置を取得する効率が大幅に向上したと言えます。ページ上の要素の絶対位置を取得するにはループする必要があります。

次のコードは、スクロール後の簡単な例を示しています。スクロール バーで赤い領域をクリックすると、各値の変化が表示されます。