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)