document.documentElement.clientWidth
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的更多相关文章
- 点击图片或者鼠标放上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 ...
- document.body.clientWidth vs document.documentElement.clientWidth
http://blog.csdn.net/zb0567/article/details/7182391 mobile web javascript library http://www.gbin1.c ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- document.body.clientHeight 和 document.documentElement.clientHeight的区别
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- document.body.clientHeight和 document.documentElement.clientHeight 的区别
1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）
js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
随机推荐
- UnionPay,ChinaPay 最新 银联支付接口C#\Asp.net\MVC 版本
1.概念普及 一.理解什么是UnionPay.ChinaPay 这两个概念如果搞不清楚,绝对够你瞎折腾一段时间的. UnionPay:中国银联,最大的机构:他本身也提供系统接口但都是B2B的,对于单个 ...
- Oracle-ARCGIS-SDE 数据整合遇到的问题
一. 近日在做全文检索,基础采用oracle text,版本是10g,做好管理页面后,有功能是删除索引,就是生成drop index的语句.没有想到这个全文检索的index这么直接弄还不行,经过这样删 ...
- c++中的##和#的区别
##是一个连接符号,用于把参数连在一起 #是“字符串化”的意思.出现在宏定义中的#是把跟在后面的参数转换成一个字符串 #define paster( n ) printf( "token & ...
- windows原生开发之界面疑云
windows桌面开发,界面始终是最大的困惑.我们对前端工具的要求,其实只有窗体设计器.消息映射,过分点的话自适应屏幕.模型绑定.能够免于手工书写,其实这个问题并不复杂,但VS不实现.QT语法 ...
- LINUNX下PHP下载中文文件名代码
function get_basename($filename){ return preg_replace('/^.+[\\\\\\/]/', '', ...
- 配置新系统（Win7 x64）
新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...
- 我的首个MOOC课程《面向对象软件开发实践》
我的首个MOOC课程<面向对象软件开发实践> 我将在网易云课堂开讲MOOC课<面向对象软件开发实践>(http://mooc.study.163.com/course/YOOK ...
- [PaPaPa][需求说明书][V1.0]
前 言 嘿嘿!嘿嘿!嘿嘿嘿嘿!大家好,我是XXX! 经过30K大大几篇文章在博客园怒刷存在感之后,咱们的小群瞬间从70人的数量增加到了将近400人.一下子加进来这么多人我还真是有点不适应啊! 我知 ...
- square开源vim,tmux配置在linux上使用
首先安装需要的软件 apt-get install vim ack-grep git tmux gnome-terminal ctags xclip silversearcher-ag 这里tmux需 ...
- python 字符串复制
通过变量来进行赋值 fstr = 'strcpy'sstr = fstrfstr = 'strcpy2'print sstr