首页 > 代码库 > javascript 之clientHeight、scrollHeight、offsetHeight
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 CSSheight
+ CSSpadding
- 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 minimumclientHeight
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)高度,包括因溢出而不可见的内容,同样包括内填充,但不包括边框和外边距。
javascript 之clientHeight、scrollHeight、offsetHeight