DOM -- 元素大小和滾動 · 前端知識 -- 學習整理

>[success] # DOM -- 元素大小和滾動 1. **clientWidth**：contentWith+padding（不包含滾動條） 2. **clientHeight**：contentHeight+padding 3. **clientTop**：border-top的寬度 4. **clientLeft**：border-left的寬度 5. **offsetWidth**：元素完整的寬度 6. **offsetHeight**：元素完整的高度 7. **offsetLeft**：距離父元素的x 8. **offsetHeight**：距離父元素的y 9. **scrollHeight**：整個可滾動的區域高度 10. **scrollTop**：滾動部分的高度 ![](https://img.kancloud.cn/ad/7e/ad7e4d0088f562e36782f59390baacc6_749x675.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { height: 100px; overflow: scroll; width: 100px; } </style> </head> <body> <div class="box"> 測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試 </div> <script> const boxDom = document.querySelector('.class') const height = boxDom.clientHeight // contentHeight+padding(不包含邊框) const width = boxDom.clientWidth // contentWith+padding（不包含滾動條，不包含邊框） const top = boxDom.clientTop // border-top的寬度 const left = boxDom.clientLeft // border-left的寬度 const ensembleWidth = boxDom.offsetWidth // 元素完整的寬度 const ensembleHeight = boxDom.offsetHeight // 元素完整的高度 const x = boxDom.offsetLeft // 距離父元素的x const y = boxDom.offsetHeight // 距離父元素的y const sH = boxDom.scrollHeight // 整個可滾動的區域高度 const sT = boxDom.scrollTop // 滾動部分的高度 </script> </body> </html> ~~~