一个document.documentElement.clientWidth为0的问题
关于获取各种浏览器可见窗口大小的一点点研究
<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽：" document.body.clientWidth;
s = " 网页可见区域高：" document.body.clientHeight;
s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽：" document.body.scrollWidth;
s = " 网页正文全文高：" document.body.scrollHeight;
s = " 网页被卷去的高(ff)：" document.body.scrollTop;
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
s = " 网页被卷去的左：" document.body.scrollLeft;
s = " 网页正文部分上：" window.screenTop;
s = " 网页正文部分左：" window.screenLeft;
s = " 屏幕分辨率的高：" window.screen.height;
s = " 屏幕分辨率的宽：" window.screen.width;
s = " 屏幕可用工作区高度：" window.screen.availHeight;
s = " 屏幕可用工作区宽度：" window.screen.availWidth;
s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话 在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
分享到：
相关推荐
在标准模式下，则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0，若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后，前端开发者在...
- 在 IE 中，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`均返回0。 - 在 Firefox 和 Opera 中，`document.documentElement.clientWidth`和`document.documentElement....
`document.body.scrollTop` 是一个用于获取或设置浏览器中页面垂直滚动距离的属性。这个属性在前端开发中非常实用，尤其是在处理页面滚动效果、动态布局调整等方面。通过了解并掌握 `document.body.scrollTop` 的...
这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中，这两个属性可能有不同的行为，因此需要进行条件判断来确保兼容性。 ```javascript ...
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
- 在IE中，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`可能返回0，这是因为IE默认不遵循W3C标准。 - Firefox和Opera遵循W3C标准，它们的`document.documentElement....
在 IE 中，`document.documentElement.clientWidth` 可以获取可见区域的宽度，`document.documentElement.clientHeight` 可以获取可见区域的高度。 在 FireFox 中，`document.documentElement.clientWidth` 可以...
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
W3C 标准推荐使用 `document.documentElement` 来引用文档元素（通常为 `<html>`），因为它提供了更全面的布局信息。在标准模式下，`document.documentElement.clientWidth` 和 `document.documentElement....
例如，可以编写一个函数，根据浏览器类型选择合适的获取高度和宽度的方法。同时，随着现代浏览器对Web标准的支持逐渐增强，使用CSS3的`resize`事件和`window.innerWidth`、`window.innerHeight`等属性也能更方便地...
`document.compatMode`返回一个字符串，表示当前文档的渲染模式。它可能的值有： 1. **BackCompat**：这是怪异模式的标识，意味着浏览器将以非标准的方式解析文档，通常在没有正确DOCTYPE声明或者DOCTYPE声明不被...
小球在桌面上自由移动，要清楚的几个问题 ...宽：document.documentElement.clientWidth || document.body.clientWidth; 高：document.documentElement.clientHeight || document.body.clientHeight;
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); ``` 此外，...
winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight; } else if (document.body) { // other winW = document.body.clientWidth; winH = document.body...
但在W3C标准模式下（如XHTML文档），`document.body.scrollTop`通常返回0，此时应使用`document.documentElement.scrollTop`和`document.documentElement.scrollLeft`来获取正确的滚动值。 以下是一段具有良好兼容...
- `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 返回的是0。 - 如果页面定义了W3C标准，则： - `document.body.clientWidth` 和 `document.body.clientHeight` 返回的是...
下面是一个示例代码： ```javascript function getHeight(){ var yScroll; if (window.innerHeight && window.scrollMaxY) { yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body....
例如，一个分辨率为1920x1080的屏幕意味着它可以在水平方向上显示1920个像素，在垂直方向上显示1080个像素。 #### 获取屏幕分辨率 在JavaScript中，可以通过`window.screen`对象来访问屏幕信息。其中两个常用属性...
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document....