彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
2024-08-27 10:37:12
测试用例：
<!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:
当前容器上边界距离浏览器顶部的距离。
最新文章
- asp.net identity 2.2.0 在WebForm下的角色启用和基本使用（三）
- linux常用的命令
- WPF自动隐藏的消息框(鼠标放上去将一直显示，移开动画继续)，提供normal和error两种边框。
- PIN码计算锦集
- CentOS 5.8/6.7若干优化
- 一步步学习ASP.NET MVC3 (8)——EmptyResult,ContentResult,RedirectResult
- ECharts中文显示为Unicode码
- flash与php 交互（as传参给php）
- 公告：本博客搬迁到：http://www.courtiercai.com/
- 一、Python-----之变量
- UVa 11988 - Broken Keyboard (a.k.a. Beiju Text) 题解
- java系列笔记---正则表达式（2）
- C++中值传递、指针传递、引用传递的总结
- 深入浅出数据结构C语言版（19）——堆排序
- 【Windows 10 应用开发】使用x:Bind标记动态获得计算结果
- iPhone X 适配解决方案
- 计算器的单元测试dome
- 2019前端面试题汇总（主要为Vue）
- 蓝桥杯——X星球居民问题
- 数字(Number)类型(一)