document.documentElement.clientH
2020-04-08 本文已影响0人
兮木兮木
网页可见区域高：document.body.clientHeight
网页正文全文高：document.body.scrollHeight
-
clientHeight： 表示可视区域高度， 包括padding但不包括border、水平滚动条、margin的元素的高度 -
offsetHeight：表示可视区域高度，包括padding、border、水平滚动条，但不包括margin的元素的高度 -
scrollHeight: 当元素的子元素高度大于父元素，父元素出现滚动条，此时父元素的clientHeight表示可视的高度，父元素的scrollHeight表示页面的高度，包括溢出页面被挡住的部分，即其实就是子元素的高度。在没有滚动条时scrollHeight与clientHeight相等恒成立。单位px，只读元素 。 -
document.documentElement表示文档的根元素，即html元素 -
document.body表示文档中body元素正文
-
在一个空白
html页面中如下面代码片段<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> </body> </html>
-
- 此时没有任何`css`设置，通过浏览器观察，`html`元素与`body`元素的高度都是0，但是此时`document.documentElement.clientHeight` 显示为页面可见区域也就是整个视口的高度，`document.body.clientHeight`显示为0
- 如果加上`css`,` body{height: 100%;}` 此时 结果与上一条一样
- 如果加上`css` `html, body { height: 100% }` 此时 `document.documentElement.clientHeight`与`document.body.clientHeight`的值一样，都是页面可见区域也就是整个视口的高度。
综上所述，通常可通过`document.documentElement.clientHeight`来获取视口的高度。但是一般情况下，都会设置`html, body { height: 100% }`，所以一般情况下，这两个值是一样的，都是视口高度。
- 同样当body高度高于视口高度，导致html元素内出现滚动条，此时`document.documentElement.clientHeight`是屏幕可视区域高度，`document.documentElement.scrollHeight` 的高度包含溢出的部分，即等于body的高度
下面的案例理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.wrap {
height: 100%;
width: 90%;
background-color: #9a6e3a;
overflow: auto;
}
.box {
height: 2000px;
width: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
<script>
window.onload = function () {
let $box = document.querySelector('.box')
let $wrap = document.querySelector('.wrap')
console.log(document.documentElement.clientHeight) //屏幕可视区域高度
console.log(document.body.clientHeight) //屏幕可视区域高度
console.log($wrap.clientHeight) //屏幕可视区域高度
//子元素高于父元素，内部有滚动条，此时高度包含子元素溢出的部分，即等于子元素高度
console.log($wrap.scrollHeight)
console.log($box.clientHeight) //子元素内部没有滚动条 等于子元素实际高度
console.log($box.offsetHeight) //子元素内部没有滚动条 等于子元素实际高度
}
</script>
</html>
