JS中使用getBoundingClientRect()方法获取精确的元素距離

2024年4月21日156

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

`node.offsetWidth` メソッドを使用すると、要素の幅を取得できますが、数値は四捨五入されます。精確な数値が必要な場合は、`getBoundingClientRect()` メソッドを使用することで、要素の正確な幅（小数点以下6桁まで）を取得できます。例えば、`node.getBoundingClientRect().width` で幅を取得でき、他にも高さや位置情報を得ることができます。`getBoundingClientRect()` は、要素のブラウザ内での位置と占有スペースのサイズを示す矩形の集合を返します。

node.offsetWidth メソッドを使用すると、要素の幅を取得できます。類似のメソッドは以下の通りです：

offsetHeight
offsetTop
offsetBottm
offsetLeft
offsetRight

問題の発生#

私たちが offset メソッドを通じて取得した数値は四捨五入されますが、開発中には正確な数値が必要な場合があります。この場合、offset メソッドはあまり適していません。

解決策#

getBoundingClientRect() メソッドを使用すると、要素の正確な数値（小数点以下 6 桁まで）を取得できます。

使用法#

node.getBoundingClientRect().width を使用すると、要素の幅を取得できます。類似のメソッドは以下の通りです：

getBoundingClientRect().height
getBoundingClientRect().top
getBoundingClientRect().bottom
getBoundingClientRect().left
getBoundingClientRect().right

詳細説明#

getBoundingClientRect() は矩形の集合を返します。これは、現在の要素がブラウザ内での位置と占有するスペースの大きさを示します。width と height 以外の他の属性は、ビューポートの左上隅に対して計算されます。以下の図を参照してください：