js中offset与style的区别
offset
先来看一下offset的属性:
- element.offsetParent 返回该元素带有定位的父级元素,父级元素没有定位则返回body
- element.offsetTop 返回元素相对带有定位父元素上方的偏移
- element.offsetLeft 返回元素相对带有定位父元素左方的偏移
- element.offsetWidth 返回白身包括padding 、边框、内容区的宽度。返回数值不带单位
- element.offsetHeight 返回自身包括padding、边框、内容区的高度,返回数值不带单位
offset的作用
- offset可以得到任意样式表中的样式值
- offset系列获得的数值是没有单位的
- offsetWidth包含padding+ border : width
- offsetWidth等属性是只读属性,只能获取不能赈值
style的作用
- style只能得到行内样式表中的样式值
- style.width获得的是带有单位的字符串
- style.width获得不包含padding和border的值
- style.width是可读写属性,可以获取也可以赋值
因此
所以,我们想要获取元素大小位置,用offset更合适,我们想要给元素更改值,则需要用style改变