理解JS中的scrollHeight、offsetHeight、clientHeight

2017年02月19日Web前端

看到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)宽度。