1. ホーム

getBoundingClientRectの説明

2022-03-20 18:14:55

getBoundingClientRectは、ビューポートに対する要素の相対的な位置のセットを取得するために使用されます。

1. シンタックス このメソッドは引数を持ちません。

rectObject = object.getBoundingClientRect()

2. 戻り値の種類 TextRectangle オブジェクト。各矩形は、矩形の座標をピクセル単位で表す 4 つの整数プロパティ (top, right, bottom, and left) を持ちます。

 rectObject.top: 要素の上端からビューポートの上端までの距離です。

 rectObject.right: 要素の右側からビューポートの左側までの距離。

 rectObject.bottom: 要素の下端からビューポートの上端までの距離です。

 rectObject.left: 要素の左側からビューポートの左側までの距離です。

   rectObject.width: 要素の幅 (IE9+),(IE6-8、rectObject.right - rectObject.left)。

   rectObject.height: 要素の高さ (IE9+),(IE6-8、rectObject.bottom - rectObject.top)

3. ie6以上との互換性

4. IE7- 左と上に2ピクセルずつ余分なピクセルがあります。

解決方法

var rectLeft = rectObject.left - document.documentElement.clientLeft || 2;
rectRight = rectObject.right - document.documentElement.clientLeft || 2;
rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;
rectTop = rectObject.top - document.documentElement.clientTop || 2;





参考:http://www.cnblogs.com/Songyc/p/4458570.html