一文搞懂offset系列、client系列、scroll系列

·  阅读 1007

元素偏移量offset系列

offset系列相关属性可以动态地获取该元素的位置(偏移)、大小等

  • 获取元素距离带定位父元素的位置
  • 获得元素自身的宽度高度大小(注:返回的数值都不带单位)

offset系列常用属性:

属性作用
element.offsetParent返回该元素带有定位的父级元素,如果父级元素没有定位则返回body
element.offsetTop返回该元素上外边框相对带有定位的父级元素上内边框的偏移,如果父级元素没有定位则返回相对body上方的偏移
element.offsetLeft返回该元素左外边框相对带有定位的父级元素左内边框的偏移,如果父级元素没有定位则返回相对body左侧的偏移
element.offsetWidth返回该元素包括padding+border+content的宽度
element.offsetHeight返回该元素包括padding+border+content的高度

注:
1.如果存在垂直滚动条,offsetWidth叶包括垂直滚动条的宽度;如果存在水平滚动条,offsetHeight也包括水平滚动条的高度
2.当需要获得某个元素在页面上的偏移量,将这个元素的offsetLeftoffsetTop和该元素的offsetParent的相同属性相加,再加上offsetParent的相应方向的边框值,如此循环到根元素,就可获得

offset和style的区别

offsetstyle
offset可以得到任意样式表中的样式值style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的style.width得到的值是带有单位的字符串
offsetWidth包含padding+border+widthstyle.width得到的值不包含padding+border
offsetWidth是只读属性style.width可读写
想要获取元素大小位置,用offset更合适想要给元素更改值,则需要用style

元素可视区client系列

通过client相关的属性可以动态地得到该元素的边框大小,元素大小等,不带单位

属性作用
element.clientTop返回该元素上边框大小
element.clientLeft返回该元素左边框大小
element.clientWidth返回该元素包括padding+content的宽度,不含边框
element.clientHeight返回该元素包括padding+content的高度,不含边框

元素滚动scroll系列

使用scroll系列相关属性可以动态获得该元素的大小、滚动距离等,不带单位

属性作用
element.scrollTop返回被卷去的上侧距离,从内容顶部到上内边框
element.scrollLeft返回被卷去的左侧距离
element.scrollWidth返回该元素自身实际的宽度,不含边框
element.scrollHeight返回该元素自身实际的高度,不含边框
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改