offset系列屬性 · JavaScript

## 概述 offset系列屬性可以獲取到元素位置和大小. ![](https://box.kancloud.cn/8d202e918369c2f9f7f6a6d49c2415c3_932x794.png) ``` <style> body { margin: 0; } #box { width: 300px; height: 300px; background-color: skyblue; overflow: hidden; margin: 50px; } #child { width: 100px; height: 100px; background-color: pink; margin: 50px; border: 10px solid yellow; padding: 10px; } </style> </head> <body> <div id="box"> <div id="child"></div> </div> <script> var box = document.getElementById('box'); //獲取父盒子橫向坐標 console.log(box.offsetLeft); //獲取父盒子縱向坐標 console.log(box.offsetTop); //獲取父盒子寬 console.log(box.offsetWidth); //父盒子高 console.log(box.offsetHeight); var child = document.getElementById('child'); //offsetParent 獲取距離當前元素最近的定位父元素,如果沒有定位父元素此時是body. console.log(child.offsetParent); //獲取子盒子橫向坐標(距離offsetParent的橫向偏移,下同) console.log(child.offsetLeft); //獲取子盒子縱向坐標(相對于body的位置) console.log(child.offsetTop); //獲取子盒子寬度(包含padding和border) console.log(child.offsetWidth); //獲取子盒子高度 console.log(child.offsetHeight); </script> ``` ![](https://box.kancloud.cn/1b93a8c3f3670dd5fad2c20ad5f84c62_880x507.png)