offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
offset系列常用属性：
| offset系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对带有定位元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度、返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
示例代码
<style>
* {
padding: 0;
margin: 0;
}
.grandfather {
position: relative;
width: 300px;
height: 300px;
margin: 100px;
background-color: cornflowerblue;
}
.father {
position: absolute;
width: 200px;
height: 200px;
margin: 50px;
background-color: pink;
}
.son {
position: absolute;
width: 100px;
height: 100px;
margin: 30px;
padding: 10px;
background-color: coral;
}
</style>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
常用属性
offsetParent
- 如果父级元素没有定位
console.log(son.offsetParent);
输出结果返回有定位的元素，没有就返回body
- 如果父级元素有定位 输出结果为带有定位的父级元素
offsetTop
打印father和son的offsetTop
- 如果父级元素没有定位
console.log(grandfather.offsetTop); //100
console.log(father.offsetTop); //150
如果父级元素没有定位，则会返回到body或者有定位的元素的距离
- 如果父级元素有定位
console.log(grandfather.offsetTop); //100
console.log(father.offsetTop); //50
如果父级元素有定位，则会返回到有定位的父级元素的距离
offsetLeft
offsetLeft与offsetTop同理。
如果父级元素没有定位，则返回到body或者有定位的元素的距离，有则返回有定位的父级元素距离。
-
父级元素没有定位
-
父级元素有定位
offsetWidth
offsetWidth返回的大小包括内容区、padding、border的宽度。
console.log(son.offsetWidth); //120
offsetHeight
offsetWidth返回的大小包括内容区、padding、border的高度。
console.log(son.offsetHeight); //120
offset和style的区别
offset
- offset可以得到任意样式表中的样式表
- offset系列获得的数值是没有单位的
- offsetWidth包含padding+border+width
- offsetWidth等属性是只读属性，只能获取不能赋值
- 所以，我们想要获取元素大小位置，用offset更合适
style
- style只能得到行内样式表中的样式值
- styke.width获得的是带有单位的字符串
- style.width获得不包括padding和border的值
- style.width是可读写属性，可以获取也可以赋值
- 所以，我们想要给元素更改值，则需要用style改变
