彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
测试用例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0
}
html{
background: #00ffee;
height: 600px;
}
body{
border: 5px solid #ff0;
margin:5px;
padding: 5px;
height: 800px;
}
#root {
border: 5px solid red;
width: 100px;
height: 200px;
overflow: auto;
margin: 5px;
padding: 5px;
}
#child {
height: 300px;
width: 200px;
border: 5px solid blue;
margin: 5px;
padding: 5px;
overflow: auto;
}
#hehe {
height:200px;
width: 300px;
border: 5px solid purple;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div style="height: 100px"></div>
<div id="root">
<div id="child">
<div id="hehe"></div>
</div>
</div>
<script>
document.onclick = function() {
consolelog();
}
function consolelog () {
let html = document.documentElement
console.log("html.clientHeight=",html.clientHeight)
console.log("html.clientWidth=",html.clientWidth)
console.log("html.offsetHeight=",html.offsetHeight)
console.log("html.offsetWidth=",html.offsetWidth)
console.log("html.scrollHeight=",html.scrollHeight)
console.log("html.scrollWidth=",html.scrollWidth)
console.log('================================')
let body = document.body;
console.log("body.clientHeight=",body.clientHeight)
console.log("body.clientWidth=",body.clientWidth)
console.log("body.offsetHeight=",body.offsetHeight)
console.log("body.offsetWidth=",body.offsetWidth)
console.log("body.offsetTop=",body.offsetTop)
console.log("body.offsetLeft=",body.offsetLeft)
console.log("body.offsetParent=",body.offsetParent)
console.log("body.scrollHeight=",body.scrollHeight)
console.log("body.scrollWidth=",body.scrollWidth)
console.log("body.scrollTop=",body.scrollTop)
console.log("body.scrollLeft=",body.scrollLeft)
console.log('=================');
let root = document.getElementById("root");
console.log("root.clientHeight=",root.clientHeight)
console.log("root.clientWidth=",root.clientWidth)
console.log("root.offsetHeight=",root.offsetHeight)
console.log("root.offsetWidth=",root.offsetWidth)
console.log("root.offsetTop=",root.offsetTop)
console.log("root.offsetLeft=",root.offsetLeft)
console.log("root.offsetParent=",root.offsetParent)
console.log("root.scrollHeight=",root.scrollHeight)
console.log("root.scrollWidth=",root.scrollWidth)
console.log("root.scrollTop=",root.scrollTop)
console.log("root.scrollLeft=",root.scrollLeft)
//
console.log('=================================\n');
let child = document.getElementById("child");
console.log("child.clientHeight=",child.clientHeight)
console.log("child.clientWidth=",child.clientWidth)
console.log("child.offsetHeight=",child.offsetHeight)
console.log("child.offsetWidth=",child.offsetWidth)
console.log("child.offsetTop=",child.offsetTop)
console.log("child.offsetLeft=",child.offsetLeft)
console.log("child.offsetParent=",child.offsetParent)
console.log("child.scrollHeight=",child.scrollHeight)
console.log("child.scrollWidth=",child.scrollWidth)
console.log("child.scrollTop=",child.scrollTop)
console.log("child.scrollLeft=",child.scrollLeft)
}
</script>
</body>
</html>
打开控制台，单击页面，查看各项参数
height: 样式中指定的高度,是content的高度，不含paddding及其他。
clientHeight: 包含padding的高度；
clientHeight = height + padding*2(根据设置的具体情况计算)
offsetHeight: 包含border的高度；
offsetHeight =clientHeight+borderWidth*2
但是：
上面的计算方法，不适用于html元素。其他都适用。
const html = document.documentElement;
const body = document.body; /****html.offsetHeight*****/
1. 在不设置html高度的情况下; 增加的参数视具体情况不同
html.offsetHeight = body.offsetHeight+ margin*2
2. 如果设置html的高度为height;
html.offsetHeight = height; /*****html.clientHeight*********/
clientHeight是浏览器可展示区域高度（去除菜单导航等）,永远不变
scrollHeight:
1) 当前容器没有滚动条时，scrollHeight = clientHeight
2) 当前容器的内容超过容器的高度，出现滚动条时
scrollHeight = 当前容器的padding + child容器(滚动内容)的总高度（offsetHeight+margin）
scrollTop:
滚动后隐藏的内容的高度。
offsetTop:
当前容器上边界距离浏览器顶部的距离。
彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight的更多相关文章
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
- [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- 第一百一十七节，JavaScript，DOM元素尺寸和位置
学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解. 一．获取元素CSS大小 1. ...
- height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别
1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当 box-sizing: content-box 时,高度应用到元素的内容框. ...
随机推荐
- Python03之单引号、双引号、三单引号、三双引号
今天在学习字符串的时候,发现字符串有时使用单引号,有时使用双引号,而有时还使用三引号.至此我整理如下: 单引号和双引号区别.三单引号和三双引号也没什么区别. 一: 两单引号之间不可以出现单引号,如果出 ...
- 剑指offer11：输入一个整数，输出该数二进制表示中1的个数。其中负数用补码表示。（进制转换，补码反码）
1. 题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 2. 思路和方法 使用移位(<<)和 “| & !”操作来实现.1的二进制是:前面都是0,最后一位 ...
- C语言处理字符串
1. strtok 函数原型: char * strtok(char *str, const char * delim); 注意点: 两个入参必须为字符串数组: 第一次调用要传str, delim,后 ...
- 利用strace & Perf分析MySQL
strace介绍及用途 strace是一个用于诊断,分析linux用户态进程的工具 类似的工具pstrace,lsof,gdb,pstrack strace观察mysqld对my.cnf 配置文件的加 ...
- 手写PE结构解析工具
PE格式是 Windows下最常用的可执行文件格式,理解PE文件格式不仅可以了解操作系统的加载流程,还可以更好的理解操作系统对进程和内存相关的管理知识,而有些技术必须建立在了解PE文件格式的基础上,如 ...
- Delphi XE10.1 引用计数（Delphi XE10.1 Berlin终于增加了对接口的Weak, UnSafe的支持）
以往的Delphi版本,不支持接口的Weak,和UnSafe的引用,支持对象的Weak, UnSafe,而且仅在Android和Ios平台上支持. 现在Delphi XE10.1 Berlin终于增加 ...
- CentOS 6.9安装配置nmon
nmon是一款开源的性能监控工具,用于监控CentOS系统的资源消耗信息,并能把结果输出到文件中,然后通过nmon_analyser性能报告分析器生成数据分析报表. 一.安装nmon: 1. 配置ep ...
- hdu1501 记忆化搜索。。。
Problem Description Given three strings, you are to determine whether the third string can be formed ...
- Thread.interrupt()源码跟踪
1 JDK源码跟踪 // java.lang.Thread public void interrupt() { if (this != Thread.currentThread()) checkAcc ...
- WebHost.CreateDefaultBuilder
返回WebHostBuilder: 1.用Kestrel做为web服务器,并根据配置提供器内容对其配置. 2.当前目录作为content根目录. 3.从appsettings.json,环境变量,ar ...