网站的功能建设方案,网站建设接私活平台,深圳大胜上海,一台云服务器可以做几个网站今日在复习可视化尺寸获取时突发奇想#xff0c;为什么要在怪异模式下使用document.body.clientWidth#xff0c;在标准模式下使用document.documentElement.clientWidth#xff1f;以及是否在IE8及以下的版本中其中一个获取方式将返回undefined或0。 出于该问题的思考为什么要在怪异模式下使用document.body.clientWidth在标准模式下使用document.documentElement.clientWidth以及是否在IE8及以下的版本中其中一个获取方式将返回undefined或0。 出于该问题的思考有了以下代码的测试在这里我尝试还原IE8以下的IE浏览器版本通过Edge浏览器的仿真IE结果是三个方法都有返回值好似不存在兼容性的问题。 但当我给他们设置边界条件时发现不同模式下总会有一个方法返回值会出现问题。 怪异模式下的document.documentElement.clientWidth、标准模式下的document.body.clientWidth无法获取到可视窗口的真实尺寸。
一、为什么怪异模式下使用body.clientWidth 经过测试在怪异模式下使用document.documentElement.clientWidth无法正确的获取到可视窗口的真实宽度得到的结果为当前窗口中HTML元素的真实宽度假设当前的可视窗口宽度为1350pxHTML元素的真实宽度为500px那么在怪异模式BackCompat下使用document.documentElement.clientWidth方法所得到的值将为500px而不是1350px。因此在怪异模式下使用的是document.body.clientWidth方法获取可视化区域宽度。 至此问题解决但在使用document.body.clientWidth的前提下我们需要注意一点document.body.clientWidth方法获取的宽度不包含滚动条的宽度。
二、为什么标准模式下使用documentElement.clientWidth 相同的道理在标准模式下使用document.body.clientWidth无法正确获取到可视化窗口的真实宽度。值得提的一点是不管在标准模式、怪异模式下使用window.innerWidth方法都能正确的获取到正确的且包含滚动条宽度的可视化区域宽度因此当浏览器兼容该方法时应当优先使用。
三、测试代码 前提条件在CSS中将html、body两个元素的宽高设置为5000px、清除margin、padding。
1. 标准模式测试 默认的HTML就是处于标准渲染模式CSS1Compat根据下列的代码我们可以在页面上看到window.innerWidth、document.documentElement.clientWidth方法可以正确的得到可视宽度且可以看出document.documentElement.clientWidth方法并没有将滚动条宽度纳入计算。而document.body.clientWidth则是获取到了body元素的真实宽度。
/*** IE8/IE9以下无法直接使用window.innerWidth、window.innerHeight获取可视区域尺寸* 此时与滚动条滚动距离获取类似我们将从body、html元素上获取页面的宽度、高度* 此时将出现一个渲染概念标准模式、怪异模式* 我们可以通过document.compatMode来获取到当前的渲染模式* 1. backCompat:怪异模式* 2. CSS1Compat:标准模式或准标准模式如今的模式已经标准化准标准模式失去意义* 在怪异模式下*/
document.writeln(${document.compatMode CSS1Compat ? 标准模式 : 怪异模式}下通过body获取的可视窗口宽度为: ${document.body.clientWidth}br/
);
document.writeln(${document.compatMode CSS1Compat ? 标准模式 : 怪异模式}下通过body获取的可视窗口高度为: ${document.body.clientHeight}br/
);document.writeln(${document.compatMode CSS1Compat ? 标准模式 : 怪异模式}下通过documentElement获取的可视窗口宽度为: ${document.documentElement.clientWidth}br/
);
document.writeln(${document.compatMode CSS1Compat ? 标准模式 : 怪异模式}下通过documentElement获取的可视窗口高度为: ${document.documentElement.clientHeight}br/
);效果如下 2. 怪异模式测试 想要将浏览器的渲染模式修改为怪异模式我们可以修改HTML文件的文档类型如下代码所示将!DOCTYPE html修改为!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”。
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
!-- !DOCTYPE html --测试效果如下 从验证的结果中我们能够明确的发现两个方法在不同模式下可能遇到的问题因此在封装可视化尺寸获取方法考虑兼容性问题时应该注意到这一点。
四、可视尺寸兼容性方法封装 我们可以对可视化尺寸进行简单的兼容性封装
function getClientSize(){if (window.innerWidth) {return {width: window.innerWidth,height: window.innerHeight}} /*** 具体见MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode* backCompat 怪异模式* CSS1Compat 标准模式* */ else if (document.compatMode backCompat) {return {width: document.body.clientWidth,height: document.body.clientHeight}} else {return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}
}
