clientHeight,offsetHeight与scrollHeight的相关知识
在html里，width与height是最常用也是最基础的两个属性，因此，在js里，我们也经常需要操作这两个属性。js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清楚这三者之间的区别，经常望着这三个属性满脸问号，不知道该用哪个。所以今天就来看一下这三个属相的区别。
JUST SHUTUP AND SHOW ME YOUR CODE!!
ok，不多说话，看代码。
<style>
.out{
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div class="out"></div>
</body>
我们这里创建了一个宽100，高100的红色方块，没有border，没有margin，也没有padding。我们先看这种情况下三个属性的值
var out = document.querySelector('.out');
console.log(out.clientHeight); //100
console.log(out.offsetHeight); //100
console.log(out.scrollHeight); //100
恩，值都一样，似乎看不出来什么，现在我们加一个padding
<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
}
</style>
<body>
<div class="out"></div>
</body>
方块更大了，我们看一下这种情况下三个属性的值
var out = document.querySelector('.out');
console.log(out.clientHeight); //140
console.log(out.offsetHeight); //140
console.log(out.scrollHeight); //140
恩，值依然都相同，都是可视区高度+padding(不是content的高度+padding，原因一会说)，现在我们再加一个border
<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
border:10px solid black;
}
</style>
<body>
<div class="out"></div>
</body>
方块外面多了一个10像素的边框，我们再看一下三个属性的值
var out = document.querySelector('.out');
console.log(out.clientHeight); //140
console.log(out.offsetHeight); //160
console.log(out.scrollHeight); //140
注意，这时候发生变化了，clientHeight和scrollHeight没变化，offsetHeight变成了160！
观察到这里我们可以得到一个简易的结论：
clientHeight = 可视区高度 + padding
offsetHeight = content高度 + padding + border
scrollHeight = 可视区高度 + padding
仔细，仔细观察上面的结论(表述未必完全准确，待会会解释),scrollHeight与clientHeight一样(没有滚动的情况下)，先不说，看offsetHeight与clientHeight。
offsetHeight相比clientHeight多了boder的宽度，然而可视区高度与content高度又有什么不同呢？
看下面的图,我强制给方块添加了滚动条
<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
border:10px solid black;
overflow:scroll;
}
</style>
<body>
<div class="out"></div>
</body>
此时的三个属性值为
var out = document.querySelector('.out');
console.log(out.clientHeight); //128
console.log(out.offsetHeight); //160
console.log(out.scrollHeight); //128
绿色的线表示可视区高度，蓝色的线表示content的高度
由于方块出现了滚动条，滚动条占用了一定的大小，可视区因此变小了，所以此时的方块，可视区高度 < content高度
了解了这一点，我们就知道，offsetHeight并不是仅仅比clientHeight多了border的宽度，即使没有border，但是有滚动条的情况下，clientHeight是要小于offsetHeight的
下面再来看scrollHeight
为外面的方块添加一个子方块
<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
border:10px solid black;
}
.inner{
width:200px;
height:200px;
background:blue;
}
</style>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>
此时的scrollHeight的值为：
var out = document.querySelector('.out');
console.log(out.scrollHeight); //220
值为220，即scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值
注：当有滚动条时，padding-bottom和padding-right是无效的，不会进行计算，也不会进行渲染（chrome除外）
再次注意，这里计算时，对父元素的padding值应该只计算一个(即使父元素上下padding都设置了值)，可以认为只计算padding-top值(实验证明确实计算的是padding-top值，如果不设置padding-top，只设置padding-bottom，那该值是无效的)
截止到目前为止，mac上的chrome(版本：51.0.2704.106 (64-bit))对scrollHeight的计算和渲染应该是错误的(不确定是不是错误，欢迎指正),因为chrome计算scrollHeight时，计算了padding-bottom，公式如下：
scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值 + 父元素的padding-bottom值
chrome不仅是这样计算的，也是这样渲染的！！
如上图，padding-bottom在mac上的chrome上起了作用，而在其他浏览器上没有作用（padding-right也是如此）
以上是关于height的三个属性的一些说明，width的三个属性同理，就不再多说，这里可以总结一下：
clientHeight = 可视区高度 + padding
offsetHeight = content高度 + padding + border
当内部元素高度超出了外部元素高度时
scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值
当内部元素高度小于外部元素高度是
scrollHeight = 可视区高度 + padding
既然说完了这三个属性，就顺便说说相关的clientTop，offsetTop，和scrollTop吧
clientTop是指当前可视对象距离上一级元素的距离，因为当前可视对象不包含border，所以通常来说，clientTop就等于border-top值
offsetTop是指当前元素到body元素的距离，因为当前元素包含了border，所以计算时要从margin值开始，依次向外加
scrollTop是指可滚动元素超出当前窗口显示范围的高度，超出多少与当前窗口的border的宽度无关
clientHeight,offsetHeight与scrollHeight的相关知识的更多相关文章
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.av ...
- height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别
1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当 box-sizing: content-box 时,高度应用到元素的内容框. ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- 浅谈style.height、clientHeight、offsetHeight、scrollHeight
先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clie ...
- 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥
scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...
- clientHeight & offsetHeight & scrollHeight
clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...
随机推荐
- C语言课设心得分享(一)
今儿上完课设,老师果然讲的比较少,周四还不用去,看来还是学生自己折腾.我在做课设的过程中,攒了一些心得/体会,希望能和大家分享分享,也希望能一起探讨探讨.如果是我能回答的问题,我很乐意能够提供帮助. ...
- Arduino 报错总结
Arduino出现avrdude: stk500_getsync(): not in sync: resp=0x00 )首先检查是否选择了合适的板子,选错主板型号也会造成上述错误 )重新安装驱动,换个 ...
- 运用CSS和JS写的大图轮播-带箭头
<style type="text/css"> #datu { width:500px; height:400px; position:relative; margin ...
- php SPL常用接口
在PHP中有好几个预定义的接口,比较常用的四个接口(Countable.ArrayAccess.Iterator.IteratorAggregate(聚合式aggregate迭代器Iterator)) ...
- HTTP 初步知识总结
1.HTPP报文 HTTP协议以报文的格式传递数据,报文有三部分组成:起始行(对报文进行描述),首部块(包含属性),主体(包含数据,可选)所有的HTTP报文都可以分为两类:请求报文(Requset M ...
- UIWebView加载页面
在页面中 加载了一个webView 当点击该webView的页面 需要获取webView中的url. 在push出来的另一个页面中,重新初始化一个webView加载 下面这个方法 在webView加载 ...
- c#开发Mongo笔记第五篇
现在增删查改算是都完成了,但是查询算是有点不完美的,相信现在用juqeryeasyui这一类的插件的人应该也不少吧,这样的话前台展示需要JSON格式的数据, 好在mogno驱动提供toJson()的函 ...
- ImportError: No module named setuptools 解决方案
shell中输入: wget http://pypi.python.org/packages/source/s/setuptools/setuptools-0.6c11.tar.gz --no-che ...
- 关于collapsed margin（外边距合并）
这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...
- 在指定控件位置弹出popup window
先看效果图 黄色的就是弹出的popup window 首先自定义一个view用来显示,文件名为layout_my_view.xml <?xml version="1.0" e ...