js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结

今天再次遇到了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代表元素对象最顶端/最左端到对象到当前窗口显示的局限内的距顶部/左边距的间隔，也是元素垂直/水平滚动了的距离，或者是元素卷帘卷走的视觉中看不到的部分。

　　有两个关系式是(当所有元素的margin均初始化设为0时)：

　　scrollHeight - scrollTop = clientHeight：当这两个条件成立时，也就代表垂直滚动条走到底了

　　scrollWidth - scrollLeft = clientWidth：当这两个条件成立时，也就代表水平滚动条走到底了

 

以上就是本人对以上属性元素的理解总结，如有错误之处，烦请指出，大家共同进步。

转载于:https://www.cnblogs.com/momo798/p/5923371.html