今天再次遇到了offset***、client***、scroll***的这三类属性的问题,总是混淆,现归纳总结如下:
大体上来说可以这样理解:
client***属性(clientWidth、clientHeight):
表示元素可以看到内容的可见区域部分,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关。且它会直接返回属性的数值大小,可直接进行计算。分开说的话也可以这样理解:若元素大小小于父元素,大小包括padding、content部分,不包括border;若元素大小大于父元素,则表示可以看到的部分的高或宽。
offset***属性(offsetWidth、offsetHeight、offsetTop、offsetLeft):
对于offsetWidth和offsetHeight,都表示当前对象的宽度/高度。offsetWidth与style.widtht的区别是:若对象的宽度设定值为百分百宽度,无论页面变大或变小,style.width都返回此百分比;而offsetWidth则返回页面中对象的宽度值而不是百分比。
对于offsetTop和offsetLeft,都表示当前元素对象相对于其定位元素的垂直/水平偏移量。
scroll***属性(scrollTop、scrollLeft、scrollHeight、scrollWidth):
scroll是滚动条的意思,也就是scrollWidth、scrollHeight属性代表元素对象真实的宽高,即使有一部分看不到;scrollTop、scrollLeft代表元素对象最顶端/最左端到对象到当前窗口显示的局限内的距顶部/左边距的间隔,也是垂直/水平滚动条滚动了的距离。
有两个关系式是:
scrollHeight - scrollTop = clientHeight:当这两个条件成立时,也就代表垂直滚动条走到底了
scrollWidth - scrollLeft = clientWidth:当这两个条件成立时,也就代表水平滚动条走到底了
以上就是本人对以上属性元素的理解总结,如有错误之处,烦请指出,大家共同进步。