jsウィンドウ位置に対する要素の実装コードを取得する

JSは、要素のオフセット、オフセットレフト、その他のプロパティを取得します

obj.clientwidth //要素の幅を取得します

obj.clientheight //要素の高さ

obj.offsetLeft //親要素の左に対する要素

obj.offsettop //親要素に対する要素の上部

obj.offsetwidth //要素の幅

obj.offsetheight //要素の高さ

違い：

clientWidth =幅 +パディング

clientheight = height + padding

offsetWidth =幅 +パディング +ボーダー

offsetheight = width + padding + border

オフセットは、クライアントよりも境界幅が多いです

//要素の水平座標を取得します（ウィンドウに対する）関数gettop（e）{var offset = e.offsettop; if（e.offsetparent！= null）offset+= getTop（e.OffsetParent）; return offset;} //要素の水平座標（ウィンドウに対する）関数getLeft（e）{var offset = e.offsetLeft; if（e.offsetparent！= null）offset+= getLeft（e.OffsetParent）;オフセットを返します;}

また、要素の位置の取得に関するJSの記事も書きました。JSは、要素のオフセット、オフセットレフト、その他の属性を取得します。オフセットとオフセットレフ属性を介したウィンドウに対する要素の位置を取得できますが、オフセットとオフセットレフ属性はどちらも親要素に対して配置されており、通常は位置を取得する必要がある要素は最も外側の層ではないため、上部の要素を横断するオフセット関連の属性は不可欠です。その後、効率が問題になります。

 //要素の水平座標（ウィンドウに対する）関数gettop（e）{var offset = e.offsettop; if（e.offsetparent！= null）offset+= gettop（e.OffsetParent）;} //要素の水平座標を取得します（e）関数（e）機能（E）{var offset = e.offsetLeft; if（e.OffsetParent！= null）offset+= getLeft（e.offsetParent）; return offset;}

幸いなことに、ブラウザは、対応するインターフェイスGetBoundingClientRectを提供してくれました。この方法は、IEブラウザに最初に表示されました。後のブラウザもこの方法をサポートし、より完璧でした。 IEでは、要素の左、上、下部、および右属性のみを取得でき、その後の最新のブラウザーは要素の幅と幅を取得できます。

ここでは、底部の下部に比べてCSSの位置の下部ではなく、底部の底部と窓の上部の間の距離があることに注意する必要があります。同様に、RIHGT属性は、右端の要素とウィンドウの左側の間の距離です。

 var box = document.getElementById（ "box"）; var pos = box.getBoundingClientRect（）; box.innerhtml = "+posop+" left： "+pos.left+" bottom： "+" right： "+pos.right+" width： "+width+pos.height："+

オリジナルの記事、再版を示してください：フロントエンド開発から再版