clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过，可是每次用都要查一下到底哪个是文档大小哪个是视口大小，还有头疼的兼容问题。
先来官方的了解一下这三个属性：
- clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）
- scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）
- offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距
看起来解释很清晰，可是用起来好像没有这么容易啊，当然，各个浏览器的表达方式不同确实要背锅，不过，当用这些个属性的时候免不了要面对这两个东西的差异，document.body和document.documentElement，同样的属性用document.body和document.documentElemen表达出来可能会截然不同。
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中可以写：document.body。
除了documentElement，body在浏览器下表现方式的不同和各个浏览器对这三个属性的解释不同，ie下的混杂模式和标准模式也来插了一脚。
下面我们就来总结一下各个浏览器在这些个东西的作怪下对这三个属性表达：
- chrome：
document.body.clientHeight
document.body.scrollHeight -> 这三个都会返回文档的大小
document.body.offsetHeight
document.documentElement.clientHeight -> 视口的大小
document.documentElement.scrollHeight -> 文档的大小
document.documentElement.offsetHeight -> 文档的大小
火狐
console.log(document.documentElement.scrollHeight); -> 文档大小
console.log(document.documentElement.clientHeight); -> 文档大小 （三个值相同，包含滚动条）
console.log(document.documentElement.offsetHeight); -> 文档大小 console.log(document.body.clientHeight); -> 视口大小
console.log(document.body.offsetHeight); -> 文档大小（不含padding border）比scrollHeght略小
console.log(document.body.scrollHeight); -> 文档大小 和 documentElement 三个取到的值一样
在eage下模仿ie9（标准模式下）
document.body.clientHeight -> 0
document.body.scrollHeight -> 视口的大小
document.body.offsetHeight -> 0
document.documentElement.clientHeight -> 视口的大小
document.documentElement.scrollHeight -> 文档的大小
document.documentElement.offsetHeight -> 文档的大小（包括边框）
- edge模拟ie8的混杂模式document.compatMode === "BackCompat"
document.documentElement.offsetHeight -> 文档大小
document.documentElement.offsetHeight -> 文档大小
document.documentElement.clientHeight -> 视口大小
document.body.clientHeight -> 视口大小
document.body.offsetHeight -> 文档大小（包括padding 和 border）
document.body.scrollHeight -> 文档大小
想必已经对这个属性厌恶至极了，各个因素的影响导致想要获取视口大小和文档大小变成一个头疼的问题，最后下面两个函数解决了这个问题，兼容了不同的浏览器。
/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
*document.documentElement.clientWidth或者document.body.clientWidth
*来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
*使用方法 ： getViewPort().width;
*/
function getViewPort () {
if(document.compatMode == "BackCompat") { //浏览器嗅探，混杂模式
return {
width: document.body.clientWidth,
height: document.body.clientHeight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
}
//获得文档的大小（区别与视口）,与上面获取视口大小的方法如出一辙
function getDocumentPort () {
if(document.compatMode == "BackCompat") {
return {
width: document.body.scrollWidth,
height: document.body.scrollHeight
};
} else {
return {
width: Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
}
}
}
关于Width的和上面的没有太大差异，参考上面的解释。
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案的更多相关文章
- clientHeight , scrollHeight , offsetHeight之间的区别
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...
- height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
- clientHeight—scrollHeight—offsetHeight三者的区别
clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- clientHeight scrollHeight offsetHeight
<div style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...
- clientHeight / scrollHeight / offsetHeight 等属性的区别图
网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别
1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当 box-sizing: content-box 时,高度应用到元素的内容框. ...
随机推荐
- RabbitMQ(4) 未路由的消息、TTL和死信
未路由的消息 当生产这发送的消息到达指定的交换器后,如果交换器无法根据自身类型.绑定的队列以及消息的路由键找到匹配的队列,默认情况下消息将被丢弃.可以通过两种方式 处理这种情况,一是在发送是设置man ...
- 不用storyboard，用xib开发
1. 新建一个Single View Application项目, 删除自动生成的.storyboard文件和ViewController文件 2. 新建一个UIViewController的子类,命 ...
- d3.js（v5.7）的比例尺以及坐标轴
直接上代码了,这里的一些函数用的是之前我自己封装的函数(包括attr的obj支持和节点数量和数据数量的自动匹配),若有不明白的,可以查看之前的博客: 页面的效果如下: 接下来继续添加坐标轴: 最终:
- Java之引用类型分析(SoftReference/WeakReference/PhantomReference)
引言: 即使对于Java的很多老鸟来说,如果忽然问他引用的类型,大概率是一脸茫然,不知所措的-.Java中的引用还分类型,神马情况??? 本文将针对这些类型进行分析,帮助您一文知所有类型. Java的 ...
- [置顶]
普通程序员如何入门AI
毫无疑问,人工智能是目前整个互联网领域最火的行业,随着AlphaGo战胜世界围棋冠军,以及各种无人驾驶.智能家居项目的布道,人们已经意识到了AI就是下一个风口.当然,程序员是我见过对于新技术最敏感的一 ...
- RxJava 1.x 笔记：创建型操作符
本篇文章是阅读 官方文档 的笔记. 作者:shixinzhang(百度搜索 "shixinzhang CSDN" 即可找到我) RxJava 也用了有段时间,那么多操作符总不想去记 ...
- mongodb 使用
一.下载 MongoDB的官网是:http://www.mongodb.org/ MongoDB最新版本下载在官网的DownLoad菜单下:http://www.mongodb.org/downloa ...
- Git详解之六 Git工具
以下内容转载自:http://www.open-open.com/lib/view/open1328070367499.html Git 工具 现在,你已经学习了管理或者维护 Git 仓库,实现代码控 ...
- HihoCoder1050 树中的最长路 树形DP第三题(找不到对象)
题意:求出的树中距离最远的两个结点之间相隔的距离. 水题一道,以前只会用路的直径来解. 代码如下: #include<cstdio> #include<cstdlib> #in ...
- Codeforces1070 2018-2019 ICPC, NEERC, Southern Subregional Contest (Online Mirror, ACM-ICPC Rules, Teams Preferred)总结
第一次打ACM比赛,和yyf两个人一起搞事情 感觉被两个学长队暴打的好惨啊 然后我一直做傻子题,yyf一直在切神仙题 然后放一波题解(部分) A. Find a Number LINK 题目大意 给你 ...