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 时,高度应用到元素的内容框. ...
随机推荐
- CentOS 6安装Oracle 11gR2数据库
1.安装环境--- 操作系统:CentOS release 6.8 (Final) oracle:Oracle Database 11g Enterprise Edition Release 11.2 ...
- SQL事务的四种隔离级别和MySQL多版本并发控制
SQL标准定义了4类隔离级别,包括了一些具体规则,用来限定事务内外的那些改变时可见的,那些是不可见的.低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. ReadUncommitted( ...
- 用JAMES实现自己的邮件服务器
简介 James 是一个企业级的邮件服务器,它完全实现了smtp 和 pops 以及nntp 协议.同时,james服务器又是一个邮件应用程序平台.James的核心是Mailet API,而james ...
- Unity3D 海水多线程渲染算法实现
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...
- liunx工具学习之taskset
当你优化多线程任务的时候,发现某个线程在不同的核上跳转较大,从而耗费CPU的时候想法肯定是想可以把对应线程绑定到特定的核上,可是每次这样操作每次尝试看效果的时候都要重启进程,那有没有一个工具可以直接处 ...
- Objective C - 4 - 下载图片并且加载到View
#import "LoadInternetImageViewController.h" @interface LoadInternetImageViewController () ...
- 我个人所有的独立博客wordpress都被挂马
晕,所有的独立博客都中了这个,难怪访问有点慢,今天使用谷歌浏览器 来自知名恶意软件散布者 ***.net 的内容已经插入此网页.现在访问此网页很可能会导致您的计算机受到恶意软件入侵. 恶意软件是一种不 ...
- apt-get -f install
http://zhidao.baidu.com/link?url=tZLEfm1Ycc1pWS67-95fXU596CtwA_1l2pPfzINUTxvOCvWdf3JZsWuZNxsxn0Jv6Om ...
- cocos2d-x 3.17 jsb android运行报错
编译成功,运行失败,提示如下: 2018-11-15 19:09:56.343 2820-2852/net.jd85.test D/cocos2d-x debug info: cocos2d: ful ...
- 20179223《Linux内核原理与分析》第四周学习笔记
补交第三周作业 完成一个简单的时间片轮转多道程序内核 1.使用实验楼的虚拟机打开shell,用cd LinuxKernel/linux-3.9.4进入linux-3.9.4. 2.执行命令qemu - ...