JS种offsetTop、scrollTop、clientTop等各个属性的介绍

JS中offsetTop、clientTop、scrollTop各属性介绍

这里是Javascript中制作滚动代码的常用属性

1.offsetTop

  当前对象到其上级层顶部的距离。

2.offsetLeft

  当前对象到其上级层左边的距离。

3.offsetWidth

  当前对象的宽度。(包括边线的宽)

  与style.width属性的区别在于:

  1)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比。

  2)而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight

  当前对象的高度。(包括边线的高)

  1）与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比

  2）而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.clientWidth

  是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

6.clientHieght

  网页可见区域高

7.scrollLeft

  对象的最左边到对象在当前窗口显示的范围内的左边的距离。

  即是在出现了横向滚动条的情况下，滚动条拉动的距离。

8.scrollTop

  对象的最顶部到对象在当前窗口显示的范围内的顶边的距离。

  即是在出现了纵向滚动条的情况下，滚动条拉动的距离。

9.网页正文部分上： window.screenTop

10.网页正文部分左： window.screenLeft

11.屏幕分辨率的高： window.screen.height

12.屏幕分辨率的宽： window.screen.width

13.屏幕可用工作区高度： window.screen.availHeight