区分clientHeight、scrollHeight、offsetHeight
区分clientHeight、scrollHeight、offsetHeight
clientHeight、offsetHeight、scrollHeight都是用来描述DOM元素的高度的属性;对于同一个元素,它们分别表示的高度值会有所不同。具体如下:
clientHeight:
只读属性,所表示的元素高度包括:元素的内容高度(如果有下滚动条,需减去下滚动条的高度,下滚条默认高度为17px)+上下padding;不包括上下border、上下margin、下滚动条高度(如果元素有下滚动条,则clientHeight表示的高度不包含下滚动条)。
offsetHeight:
只读属性,所表示的元素高度包括:元素的内容高度(如果有下滚动条,需减去下滚动条的高度,下滚条默认高度为17px)+上下padding+上下border+下滚动条高度(如果元素有下滚动条,则offsetHeight表示的高度包含下滚动条);不包括上下margin;我们通过css设置的高度、上下padding、上下border组成了offsetHeight的值。
scrollHeight:
只读属性,如果元素内的子元素高度大于该元素,scrollHeight所表示的元素高度为:元素内子元素的高度+该元素的上下padding;如果元素内的子元素高度小于该元素,scrollHeight所表示的元素高度为:该元素的内容高度(如果有下滚动条,需减去下滚动条的高度,下滚条默认高度为17px)+该元素的上下padding,此时,与clientHeight在数值上相等。
下面两个demo可以很好地证明以上表述:
demo1(如果元素内的子元素高度大于该元素):
- html
<div class="container"><div class="box"></div>
</div>
- css
.container{overflow: auto;width: 1000px;height: 500px;padding: 20px 40px;border: 10px dashed #f44336;margin: 30px 40px;background: #ffeb3b;
}
.box{width: 500px;height: 2000px;background: #2196f3;
}
demo2(如果元素内的子元素高度小于该元素):
- html
<div class="container"><div class="box"></div>
</div>
- css(如果有下滚动条)
.container{overflow: scroll;width: 1000px;height: 500px;padding: 20px 40px;border: 10px dashed #f44336;margin: 30px 40px;background: #ffeb3b;
}
.box{width: 500px;height: 200px;background: #2196f3;
}
- css(如果没有下滚动条)
.container{width: 1000px;height: 500px;padding: 20px 40px;border: 10px dashed #f44336;margin: 30px 40px;background: #ffeb3b;
}
.box{width: 500px;height: 200px;background: #2196f3;
}
总结:
1、clientHeight与offsetHeight的区别在于是否将元素的border以及下滚动条高度(如果有下滚动条)计算在内;
2、如果元素内的子元素高度小于该元素,该元素的scrollHeight与clientHeight在数值上相等;
3、如果元素内的子元素高度大于该元素,scrollHeight所表示的元素高度为:元素内子元素的高度+该元素的上下padding;
参考文献:
[1] css clientheight、offsetheight、scrollheight详解
[2] 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
[3] js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结
区分clientHeight、scrollHeight、offsetHeight相关推荐
- clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
- 这该死的高度,height,clientHeight,scrollHeight,offsetHeight
引言: 虽然有时候界面的设置不是我们这些后台代码人员的工作,但是有时候却难以理解控件生成时的一些怪事,比方在学习webabcd的扩张GridView中固定列时,你或许已经被其中的height,clie ...
- 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 ...
- 浏览器窗口尺寸clientHeight / scrollHeight / offsetHeight / innerHeight
https://www.cnblogs.com/nanshanlaoyao/p/5964730.html clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取 ...
- CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联
怎么区分clientHeight.offsetHeight.scrollHeight.scrollTo.scrollTop呢,我们通过下面的示例来搞清楚. 现有如下示例: 对应css为 .div {w ...
- [转载]offsetHeight , clientHeight, scrollHeight 区别
我们这里说说四种浏览器对 document.body 的 clientHeight.offsetHeight 和scrollHeight的解释,这里说的是 document.body,如果是 HTML ...
- scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解
开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...
- clientHeight、offsetHeight 和 scrollHeight
2019独角兽企业重金招聘Python工程师标准>>> window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeig ...
- 再次详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.avail ...
最新文章
- oracle对查询结果求和_某国企Oracle数据库误truncate table恢复案例
- msm8953之串口dts配置
- tftp 在线更新 cisco switch IOS
- sklearn 中的preprocessing数据预处理
- modbus3-关于Modicon Modbus Protocol和modscan32
- 边缘计算应用场景_云计算与边缘计算协同九大应用场景(2019年)发布(附PPT解读)...
- 亚信安全协助绿谷制药确保“秘方”安全
- easyui启用行号错位解决方案
- [LeetCode][Python][C#]刷题记录 26. 删除排序数组中的重复项
- TensorFlow保存和载入训练模型
- 数据缓存 php,数据缓存 · ThinkPHP3.2.3完全开发手册 · 看云
- 为什么我tracert经过H3C设备的时候,老是*号,不回包
- 【控制】动力学建模简介 --> 牛顿-欧拉 (Newton-Euler) 法和拉格朗日 (Lagrange) 法
- 漏洞扫描器简单教程(天镜、Nessus、Appscan、Awvs)
- 罗升阳 51test 博客
- OJ一元二次方程的根*易错点
- deepin 相关问题
- php 大转盘抽奖概率 角度,在线抽奖大转盘和概率计算
- Android 11 Bata 正式发布!闲鱼最新升级版 Flutter 技术电子书开放下载
- Unity使用AVProVideo播放透明视频
热门文章
- jenkins集成sonar问题记录
- android屏幕同步到macbook,Mirror for Android TV for Mac(屏幕和声音镜像到Android TV的工具)...
- 走近openGauss数据库
- Gdiplus的使用
- SQL语句批量替换某个指定的字符串
- 树形dp-智慧树下你和我
- c语言基础知识点字母和含义,大学c语言必背基础知识_c语言基础知识大全
- 《安富莱嵌入式周报》第259期:2022.03.28--2022.04.03
- 软考中级数据库系统工程师
- 让VSCode字体性感起来