测试用例：
<!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:
当前容器上边界距离浏览器顶部的距离。
原文地址：https://www.cnblogs.com/lyraLee/p/11565904.html
时间： 2024-09-30 21:29:37