javascript 之clientHeight、scrollHeight、offsetHeight

三者均用于获取一个Dom节点的高度，不过他们的含义并不相同。

 

clientHeight ：

MDN对该属性的描述如下：

The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

　　从描述可以知道，它是一个只读属性。表示一个Dom节点的内部（inner）高度，包括内填充，但不包括水平滚动条、边框和外边距。

 

offsetHeight：

MDN对该属性的描述如下：

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

　　包括内填充、边框和水平滚动条，不包括外边距。

 

scrollHeight：

MDN对该属性的描述如下：

The Element.scrollHeight read-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. ThescrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.

　　同样它也是一个只读属性。表示一个Dom节点的内容（content）高度，包括因溢出而不可见的内容，同样包括内填充，但不包括边框和外边距。

转载于:https://www.cnblogs.com/fly-could/p/3946889.html