元素偏移量 offset

Posted 2023-05-08

参考技术A

offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意： 返回的数值都不带单位

offset 与 style 区别
offset style
offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适
style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变
offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
1.获得元素距离带有定位父元素的位置
2.获得元素自身的大小（宽度高度）

元素的offset，scroll,client之间的区别和联系

1.offset的偏移量是相对于父元素有定位时的偏移量；ps:元素自身有fixed定位，offsetParent的结果为null;
2.scroll是父元素内的内容滚动时的偏移；
3.client是元素本身的偏移量（元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0）；
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height