document.documentElement.clientHeight与document.body.clientHeight的区别
网页可见区域高：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%;}此时 结果与上一条一样如果加上
csshtml, 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>
document.documentElement.clientHeight与document.body.clientHeight的区别相关推荐
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- 再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
(scrollHeight.offsetHeight.clientHeight 同样可按本文去理解.) 这是一个很复杂的问题,让我们想像一下: document.documentElement.scr ...
- document.documentElement与document.body
写前端时遇到这两种方法,转载待以后查看. 两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HT ...
- document.documentElement.scrollTop
获取滚动条位置:document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置:document.documentElement.scrollTop; 而不是:d ...
- document.documentElement.clientWidth
<script> function getInfo() { var s = ""; s = " 网页可见区域宽:" document.body.cl ...
- 转document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: 转至:http://www.cnblogs.com/ckmouse/ar ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- document.body 与 document.documentElement区别介绍
什么是document.body? 返回html dom中的body节点 即<body> 什么是 document.documentElement? 返回html dom中的root 节点 ...
- document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
最新文章
- 买了一个软件测试就业班课程，不知道值不值
- spring-boot 定时任务
- 跳过堡垒机，一键登陆
- Spark基础学习笔记14：Scala数据结构
- Linux Kernel ‘CLONE_NEWUSER|CLONE_FS’本地权限提升漏洞
- 在mysql支持关系模型中_MySQL支持关系模型中、和三种不同的完整性约束
- [网络通信协议]websocket
- 中国移动(ECIA)云网工程师技术知识-立哥技术
- html动画页面源码,9款超炫HTML5最新动画源码
- 微信第三方平台代小程序实现业务
- 朋友的感情感想，感谢初中挚友“寻觅心香”提供！希望他能坚强！
- 调节笔记本外接显示器亮度
- 算法竞赛——进阶指南——acwing355. 异象石 dfn的性质+lca （简单的小证明）
- 怎么打开Win10系统的文件夹选项？
- matlab的diag函数
- 文思海辉与雅观科技达成战略合作，加速智慧场景应用落地
- python编程第四版_Python编程 第4版 影印版 上下册
- Mask rcnn 代码复现
- Python-etup环境变量os模块
- 自采集电脑壁纸网站PHP源码vV2.0+自适应WAP端