document.documentElement.clientWidth

摘自：http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html

关于获取各种浏览器可见窗口大小的一点点研究
<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高）

以上摘自：http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html

经本地测试和研究再次对 document.documentElement.clientWidth 进行解释：

每一个html文件在浏览器中都会被解析为一个页面，document.documentElement.clientWidth则是获取本页面的宽度。

下面进行举例子说明：

1） 如果在浏览器全屏，并且打开的一个标签页中只包含一个页面，则document.documentElement.clientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度：即window.screen.availWidth;

2）当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面：则document.documentElement.clientWidth即本页面的宽度=浏览器的宽度！=屏幕可用工作区宽度：即window.screen.availWidth;

3）当打开的一个标签页中不只包含一个页面：比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面，如下所示

则iframe指向页面的document.documentElement.clientWidth不再等于浏览器宽度，而是等于ifame的宽度

个人理解：document.documentElement.clientWidth是该页面的宽度

如有不合理，请留言，谢谢

document.documentElement.clientWidth的更多相关文章

  1. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  2. document.body.clientWidth vs document.documentElement.clientWidth

    http://blog.csdn.net/zb0567/article/details/7182391 mobile web javascript library http://www.gbin1.c ...

  3. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

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

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  5. document.body.clientHeight 和 document.documentElement.clientHeight的区别

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  6. document.body.clientHeight和 document.documentElement.clientHeight 的区别

    1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...

  7. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  8. js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

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

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

随机推荐

  1. window下，加载redis拓展

    下载地址: http://windows.php.net/downloads/pecl/snaps/redis/2.2.5/ 看下自己phpinfo的信息          就选择   ts-x86 ...

  2. 自定义 scrapy 爬虫的 requests

    之前使用 scrapy 抓取数据的时候 ,默认是在逻辑中判断是否执行下一次请求 def parse(self): # 获取所有的url,例如获取到urls中 for url in urls: yiel ...

  3. (笔记)VC6插件安装--Unable to register this add-in because its DllRegisterServer returns an error

    在安装插件(如VC6显示行号的插件VC6LineNumberAddin.dll)的时候经常会提示"Unable to register this add-in because its  Dl ...

  4. Spark源码系列（三）作业运行过程

    作业执行 上一章讲了RDD的转换,但是没讲作业的运行,它和Driver Program的关系是啥,和RDD的关系是啥? 官方给的例子里面,一执行collect方法就能出结果,那我们就从collect开 ...

  5. uniGUI试用笔记（十五）通过URL控制参数

    通过URL代入参数,在代码中读取,如: http://localhost:8501/?ServerPort=212&&ServerIP=192.168.31.12 在代码中可以通过: ...

  6. 转:php park、unpark、ord 函数使用方法（二进制流接口应用实例）

    在工作中,我也逐渐了解到park,unpark,ord对于二进制字节处理的强大. 下面我逐一介绍它们.     park,unpark,ord这3个函数,在我们工作中,用到它们的估计不多. 我在最近一 ...

  7. merge 实现

    今天写了个小程序,做两个已经从小到大排序好的数据的merge. 要求: listA = (1, 3, 5, 10); listB = (4, 6, 12):listA 和listB都是排序由小到大的列 ...

  8. 使用go的ssh包快速打造一个本地命令行ssh客户端

    热身运动

  9. [CS231n-CNN] Linear classification II, Higher-level representations, image features, Optimization, stochastic gradient descent

    课程主页:http://cs231n.stanford.edu/ loss function: -Multiclass SVM loss: 表示实际应该属于的类别的score.因此,可以发现,如果实际 ...

  10. unity4.6 failed to update unity web player

    unity4.6 failed to update unity web player 新升级的 4.6.2P2 版本修复了IOS很多的bug. 但突然发现导出的Web版本反而不能工作了. “faile ...