ネイティブJSを使用して要素の位置とサイズを取得する

1. 内側の高さ、内側の幅: 内側のマージン + コンテンツ ボックス

clientWidth
clientHeight

2. 外側の高さ、外側の幅: 境界線 + 内側のマージン + コンテンツ ボックス

offsetWidth
offsetHeight

3. 上の境界線、左の境界線

clientTop
clientLeft

4.ビューポートに対する相対的な位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离

5. 上のオフセット、左のオフセット

offsetTop
offsetLest

6. ページの実際のサイズ

document.documentElement.clientWidth
document.documentElement.clientHeight

8.画面の左上隅と左上隅

document.documentElement.scrollWidth
document.documentElement.scrollHeight

9. 画面の幅と高さ

window.screenX、
window.screenY

10. 利用可能な画面の幅と高さ（タスクバーを除く）

window.screen.width
window.screen.height

11.表示領域 + スクロールバー)

window.screen.availWidth
window.screen.availHeight

12. ウィンドウの外側の高さと外側の幅

window.innerWidth
window.innerHeight

以上がネイティブJSを使用して要素の位置とサイズを取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。