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

javascript 之clientHeight、scrollHeight、offsetHeight相关推荐

这该死的高度,height,clientHeight,scrollHeight,offsetHeight
引言: 虽然有时候界面的设置不是我们这些后台代码人员的工作,但是有时候却难以理解控件生成时的一些怪事,比方在学习webabcd的扩张GridView中固定列时,你或许已经被其中的height,clie ...
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
heigh,clientHeight , scrollHeight , offsetHeight介绍
height是element元素部分属性,值为字符型,而其他三种的值为数字型,JS获取方式document.body.style.height,如果写成document.body.height会提示u ...
height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数
1.clientHeight 含义:元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距图示: 2.offsetHeight 含义:元素的像素高度包含元素的垂直内边距和边框,水平 ...
浏览器窗口尺寸clientHeight / scrollHeight / offsetHeight / innerHeight
https://www.cnblogs.com/nanshanlaoyao/p/5964730.html clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取 ...
clientHeight、offsetHeight 和 scrollHeight
2019独角兽企业重金招聘Python工程师标准>>> window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeig ...
再次详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.avail ...
css clientheight、offsetheight、scrollheight详解
介绍网上介绍clientheight.offsetheight.scrollheight的帖子很多,看后感觉明白了,一细想似乎又不明白了.为了获取更权威的解答,查阅了MDN 文档,希望能帮助后来人. ...
[转载]offsetHeight , clientHeight, scrollHeight 区别
我们这里说说四种浏览器对 document.body 的 clientHeight.offsetHeight 和scrollHeight的解释,这里说的是 document.body,如果是 HTML ...

javascript 之clientHeight、scrollHeight、offsetHeight

javascript 之clientHeight、scrollHeight、offsetHeight相关推荐

最新文章

热门文章