2021-09-01

摘要:上文中主要是提及了滚动条的部分实验性特性(chrome firefox),本文将会重点介绍如何使用js获得元素的大小,位置,以及滚动位置和滚动长度.

元素大小

元素可视区域(client)

1.想要获得该元素可视区域中看不到的地方的左侧右侧宽度,也就是clientTop和clientLeft

  example.clientTop  //25
  example.clientLeft  //25

2.想要获得元素可视区域的大小,需要减去scrollbar的宽度

  example.clientHeight //323
  example.clientWidth

元素的全部区域(all)

1.想要获得元素的长,宽

  example.offsetWidth //390 contentBox+padding+border
  example.offsetHeight //390 

2.获得整个元素在当前父类下(offsetParent)的位置

 example.offsetLeft
 example.offsetTop
 

元素的滚动区域(scroll area)

对我个人而言,滚动是比较抽象不易理解的.
1.获得元素向上滚动了多少内容(这个属性是可以修改的)

example.scrollTop

2.将内容铺开后的的长度

example.scrollHeight