当前位置:网站首页>【记录】innerHeight?clientHeight?offsetHeight?scrollTop?screenTop?.....一堆高度傻傻分不清
【记录】innerHeight?clientHeight?offsetHeight?scrollTop?screenTop?.....一堆高度傻傻分不清
2022-08-11 05:16:00 【Yokirrr_】
1、window.screen
window.screen.height
- 用户屏幕的高度。
window.screen.availHeight
- 浏览器窗口在屏幕上可占用的垂直空间,即最大高度。
不会随浏览器窗口变化,只与用户屏幕尺寸有关。
2、window
window.innerHeight
- 浏览器窗口的视口的高度(包括滚动条)。
- 只读。
window.outerHeight
- 整个浏览器窗口的高度(包括地址栏啥的55667788)。
- 只读。
随着浏览器窗口变化。
不支持IE9及以下。
3、element
element.clientHeight
- 对于没有定义CSS的元素或者内联元素,为0;否则为元素可见高度(注意是可见高度,如果元素没有滚动条,则等于padding+content;如果元素有滚动条,则等于height)。
- 只读。
element.clientTop
- 元素顶部边框(border-top)的高度。
- 只读。
element.offsetHeight
- 元素加了border的可见高度(如果元素没有滚动条,则等于border+padding+content;如果元素有滚动条,则等于border+height)。
- 只读。
element.offsetTop
- 当前元素相对于其 offsetParent 元素(最近的开启定位的祖先元素,无则为根元素)的顶部内边距的距离。
- 只读。
element.scrollHeight
- 元素的padding+content高度。
- 只读。
element.scrollTop
- 这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的
scrollTop
值为0
。- 只读。
4、document.body
- html节点中的body节点。
5、document.documentElement
- 根节点,即html节点。
各个浏览器之间对于body和documentElement下的三个height有不同的见解。
参考
https://juejin.cn/post/6844903694442446861#comment
https://www.cnblogs.com/libin-1/p/5964776.html
https://qinzhen001.github.io/2017/10/27/clientHeight-scrollHeight-offsetHeight-myblog/
边栏推荐
猜你喜欢
Flask框架学习:模板继承
Flask framework learning: trailing slashes for routes
pytorch安装笔记——Pytorch在conda+CUDA10.2环境安装task01
简单做份西红柿炒蛋778
Redis - Data Types (Basic Instructions, String, List, Set, Hash, ZSet, BitMaps, HyperLogLog, GeoSpatial) / Publish and Subscribe
(1) Construction of a real-time performance monitoring platform (Grafana+Influxdb+Jmeter)
【CSDN21天学习挑战赛】第一天,配置环境外加实现mnist手写数字识别
家·谱——人脸识别家谱系统
C语言——文件操作(2)文件的读写操作
task04 Pytorch进阶训练技巧
随机推荐
pytorch和tensorflow函数对应表
(2) Docker installs Redis in practice (persistent AOF and RDB snapshots)
QT Mat转HObject和HObject转Mat 图像视觉处理
搭建PX4开发环境
for循环使用多线程优化
task06 PyTorch生态
滴滴出行 nlp算法工程师面试经验分享 带offer截图真实
flaks框架学习:在 URL 中添加变量
深入理解线程、进程、多线程、线程池
CSDN 社区内容创作规范
DS220702-0707作业
(1) Construction of a real-time performance monitoring platform (Grafana+Influxdb+Jmeter)
二、Jmeter 核心配置文件
LeetCode1166.设计文件系统
(3) Construction of a real-time performance monitoring platform (Grafana+Prometheus+Node_explorer+Jmeter)
【CSDN21天学习挑战赛】第一天,配置环境外加实现mnist手写数字识别
(三)性能实时监控平台搭建(Grafana+Prometheus+Node_explorer+Jmeter)
QT circle函数(图片标注)
C语言——函数的使用
win下clion打包的.exe文件在无运行环境的电脑运行显示缺失各种.dll