理解JS中的scrollHeight、offsetHeight、clientHeight

看到scrollHeight、offsetHeight、clientHeight等这几个模棱两可的变量时，是不是一头雾水呢？接下来就介绍下这几组DOM对象的属性。 注：只读属性有‘获取’，可读可写属性是‘设置和获取’。

scroll***

scrollHeight：获取对象的滚动高度（实际内容的高度）。

scrollWidth：获取对象的滚动宽度（实际内容的宽度）。

scrollLeft：设置和获取对象已经滚动的宽度（偏移）。

scrollTop：设置和获取对象已经滚动的高度（偏移）。

offset***

offsetHeight：获取当前对象的高度（不包括margin）。

offsetWidth：获取当前对象的宽度（不包括margin）。

offsetTop：获取当前对象相对与已定位的父元素的top值（该元素border到定位父元素的border的间距）。

offsetLeft：获取当前对象相对与已定位的父元素的left值（该元素border到定位父元素的border的间距）。

offsetParent：已定位的上层父级元素。如果无定位，则视为html根元素。

client***

clientHeight：获取对象当前的高度（仅padding+内容）。

clientWidth：获取对象当前的宽度（仅padding+内容）。

clientLeft：获取当前对象的左边框（border）宽度。

clientTop：获取当前对象的上边框（border）宽度。