JS获取元素高度宽度的问题

offset...、client...、scroll.. 这三类属性的问题，总是混淆，现归纳总结如下：

大体上我是这样理解的：

1.client...属性（clientWidth、clientHeight）：
表示元素可以看到内容的可见区域部分，它会直接返回属性的数值大小，可直接进行计算。

分开说的话也可以这样理解：若元素大小小于父元素，大小包括padding、content部分，不包括border； 若元素大小大于父元素，则表示可以看到的部分的高或宽。

2.offset...属性（offsetWidth、offsetHeight、offsetTop、offsetLeft）：
对于offsetWidth和offsetHeight，都表示当前对象的宽度/高度。offsetWidth与style.widtht的区别是：

若对象的宽度设定值为百分百宽度，无论页面变大或变小，style.width都返回此百分比；而offsetWidth则返回页面中对象的宽度值而不是百分比。

3.scroll..属性（scrollTop、scrollLeft、scrollHeight、scrollWidth）：　
scrollWidth、scrollHeight属性代表元素对象真实的宽高，即使有一部分看不到。

转载于:https://www.cnblogs.com/miaoxingxiaoQ/p/9019798.html