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 时,高度应用到元素的内容框. ...
随机推荐
- LeetCode OJ：Power of Two（2的幂）
Given an integer, write a function to determine if it is a power of two. 看一个数是不是2的幂,代码如下: class Solu ...
- shell getopts学习
#!/bin/bash while getopts i:vh name do case $name in i) opt=1 echo $OPTARG;; v) opt=2 echo 2;; h) op ...
- shell脚本中四则运算
方法一: (()) ##在括号里面可以直接对变量进行操作 例如:vim test.sh 方法二: let ##let后面加要操作的运算 例如: 方法三: expr ...
- jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...
- ubuntu16 tomcat7安装和编码修改
有直接通过命令安装的,但是我还是喜欢把文件下载下来,然后自己配置. 1,下载tomcat7二进制文件 https://tomcat.apache.org/download-70.cgi 2,解压tom ...
- HslCommunication库的二次协议扩展，适配第三方通讯协议开发，基础框架支持长短连接模式
本文将使用一个gitHub开源的项目来扩展实现二次协议的开发,该项目已经搭建好了基础层架构,并实现了三菱,西门子,欧姆龙,MODBUS-TCP的通讯示例,也可以参照这些示例开发其他的通讯协议,并Pul ...
- Android常见问题——Genymotion无法启动问题
在官网下载了Genymotion和VirturalBox的合集安装之后启动模拟器的时候发现启动不了(默认下载,啥都没干),在网上找了一些方法,也没有解决,最后偶然看到一种方法才解决的,先看一下具体的问 ...
- phpcms tag页调用缩略图
\phpcms\modules\content\tag.php 找到: 'title, description, url, inputtime, style' 改成:'title, thumb, de ...
- HDU - 5324：Boring Class （CDQ分治&树状数组&最小字典序）
题意:给定N个组合,每个组合有a和b,现在求最长序列,满足a不升,b不降. 思路:三位偏序,CDQ分治. 但是没想到怎么输出最小字典序,我好菜啊. 最小字典序: 我们倒序CDQ分治,ans[i]表 ...
- Session学习
Session学习 Session的作用就是在服务器端保存一些用户的数据,然后传递给用户一个名字为JSESSIONID的Cookie,这个JESSIONID对应这个服务器中的一个Session对象,通 ...