元素的占地面积 offsetwidth/height
![](https://img-blog.csdnimg.cn/img_convert/ee71619701905029de4d0b4a33ec2818.png)
// 0. 获取元素
var oDiv = document.querySelector('div')
// 1. offsetXXX
console.log('oDiv.offsetWidth', oDiv.offsetWidth)
console.log('oDiv.offsetHeight', oDiv.offsetHeight)
console.log('手动分割线===================')
// 2. clientXXX
console.log('oDiv.clientWidht', oDiv.clientWidth)
console.log('oDiv.clientHeight', oDiv.clientHeight)
![](https://img-blog.csdnimg.cn/img_convert/0caf71cf6162ab400a2417f3795e9ca9.png)
获取元素的偏移量 offsetleft/top
![](https://img-blog.csdnimg.cn/img_convert/ddb06e5f4e7bbd70faf51a489376680c.png)
![](https://img-blog.csdnimg.cn/img_convert/406db6116ef8464db7046a22dfb1610b.png)
![](https://img-blog.csdnimg.cn/img_convert/93239afb919235869231a4ac798c51e2.png)
![](https://img-blog.csdnimg.cn/img_convert/75a45bf134ed8edbf852e48d4c581c03.png)