再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth

（scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。）

这是一个很复杂的问题，让我们想像一下：

document.documentElement.scrollWidth
document.documentElement.offsetWidth
document.documentElement.clientWidth
document.body.scrollWidth
document.body.offsetWidth
document.body.clientWidth

有 6 个属性要测，这 6 个属性要放在 4 种情况中：

没有指定 DOCTYPE，网页内容没有超过窗口宽度；
没有指定 DOCTYPE，网页内容超过窗口宽度；
指定 DOCTYPE，网页内容没有超过窗口宽度；
指定 DOCTYPE，网页内容超过窗口宽度；

然后这 4 种情况要放到几个主流浏览器中，假设只有 3 种浏览器：

IE
Firefox
Chrome

算一下，6 * 4 * 3，有 72 种情况要测试，天啊。并且不要指望 Firefox 和 Chrome 结果是一样的，不要指望 Firefox 不会出现让您费解的结果，所以这真是一件恼火的事。

从应用入手简化分析

72 种测试情况确实很恼火，但我们回过头来一想，我们到底想要什么？

我认为我们想要两个东西：

一是 scrollWidth（scrollHeight），虽然它用处不大，但应该比 offsetWidth（offsetHeight）有用得多。它表示的是文档区的宽度（高度），比如一个网页，特别是门户网站，拖很长，就要把没有显示出来的内容都计算进去。
二是视口 viewport，就是 clientWidth，就是窗口中可显示内容的那块区域，就是我们常常看到页面上飞行广告，飞来飞去，碰到边边要反弹的那一块。

测试结果

结果很复杂，就不说了，这里只说实际中怎么使用：

要使用 scrollWidth，取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值；
要使用 clientWidth，如果 document.documentElement.clientWidth > 0，则使用 document.documentElement.clientWidth，否则使用 document.body.clientWidth。

表达式为：

var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

动手

scrollWidth、offsetWidth、clientWidth 兼容性测试文件

再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth相关推荐

转document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: 转至:http://www.cnblogs.com/ckmouse/ar ...
js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
document.documentElement与document.body
写前端时遇到这两种方法,转载待以后查看. 两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HT ...
将h5用HBuilderX打包成安卓app后，document.documentElement.scrollTop的值始终为0或者document.body.scrollTop始终为0...
1 let time = setInterval(() => { 2 let scroll = document.documentElement.scrollTop || document.bo ...
document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
document.body 与 document.documentElement区别介绍
什么是document.body? 返回html dom中的body节点即<body> 什么是 document.documentElement? 返回html dom中的root 节点 ...
document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...
【兼容性解决】页面滚动距离document.documentElement.scrollTop兼容性问题
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth

再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth相关推荐

最新文章

热门文章