document.documentElement.clientWidth

<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高)

时间: 2024-11-05 19:02:04

document.documentElement.clientWidth的相关文章

使用$(window).width(),window.outerWidth,window.innerWidth,document.documentElement.clientWidth,document.body.clientWidth的区别与兼容分析

下面先以谷歌为例做数据分析,兼容性问题后面再说. 先上一张图(图最好理解): firebug打印结果: 使用$(window).width()与$(window).height():1349 392 使用window.outerWidth与window.outerHeight:1366 728 使用window.innerWidth与window.innerHeight:1366 392 使用document.documentElement.clientWidth与document.docume

[No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 注意开头<!DOCTYPE ..>的声明,没有该声明时,document.documentElement.clientHe

document.body、document.documentElement和window获取视窗大小的区别

来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.innerHeight – 浏览器窗口的内部高度 window.innerWidth – 浏览器窗口的内部宽度 对于 Internet Explorer 8.7.6.5: document.

document.documentElement和document.body区别

body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下 区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 没使用DTD情况即怪异模式BackCompat下: document.documentElement.clientHeight=0 document.body.c

document.documentElement和document.body区别以及获取浏览器的宽高

原文:http://www.jb51.net/article/41410.htm 1.区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 2.没使用DTD情况即怪异模式BackCompat下: 代码如下: document.documentElement.clientHeight=0document.body.clientHeight=618 使用DTD情况即标准模式CSS1

document.documentElement和document.body区别介绍

if (document.compatMode == "BackCompat") { cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; sWidth = document.body.scrollWidth; sHeight = document.body.scrollHeight; sLeft = document.body.scrollLeft; sTop = document.body

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011-07-28 17:20 6532人阅读 评论(1) 收藏 举报 浏览器firefoxopera文档htmlie 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offs

JavaScript基础 IE 7,8可用 获取网页的宽度与高度 document.documentElement.clientHeight

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

获取屏幕宽高width(),outerWidth,innerWidth,documentElement.clientWidth, body.clientWidth的区别

基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height():获得的是屏幕可视区域的宽高,不包括滚动条与工具条. $(window).width() = width + padding $(window).height() = height + padding document.documentElement.clientWidth与document.documentElement.clientHei