转自：http://kanglecjr.iteye.com/blog/368183
关于获取各种浏览器可见窗口大小的一点点研究
1. <script>
2. function getInfo()
3. {
4. var s = "";
5. s = " 网页可见区域宽：" document.body.clientWidth;
6. s = " 网页可见区域高：" document.body.clientHeight;
7. s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)";
8. s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)";
9. s = " 网页正文全文宽：" document.body.scrollWidth;
10. s = " 网页正文全文高：" document.body.scrollHeight;
11. s = " 网页被卷去的高(ff)：" document.body.scrollTop;
12. s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop;
13. s = " 网页被卷去的左：" document.body.scrollLeft;
14. s = " 网页正文部分上：" window.screenTop;
15. s = " 网页正文部分左：" window.screenLeft;
16. s = " 屏幕分辨率的高：" window.screen.height;
17. s = " 屏幕分辨率的宽：" window.screen.width;
18. s = " 屏幕可用工作区高度：" window.screen.availHeight;
19. s = " 屏幕可用工作区宽度：" window.screen.availWidth;
20.
21.
22. s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
23. s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
24. //alert (s);
25. }
26. getInfo();
27. </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高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
分享到：
相关推荐
javascript 获取滚动条高度 页面宽度 页面高度 教程
javascript获取网页高度宽度.rar
javascript 获取网页高度宽度.pdf
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar
主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下
48、原生JavaScript获取页面可视宽度 49、原生JavaScript获取页面宽度 50、原生JavaScript获取页面scrollTop 51、原生JavaScript获取页面可视高度 52、原生JavaScript跨浏览器添加事件 53、原生JavaScript跨浏览器...
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...
下面小编就为大家带来一篇jQuery javascript获得网页的高度与宽度的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考
经常发现在写JavaScript的时候，都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题，时常前用后忘，要不就是在网上search，干脆自己总结一下，这样也方便再次使用，省时省力。 网页可见区域宽：...
当你在页面上使用了iframe之后...这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话，原理是一样的，本文不加详述。 首先，在你的主页面上必须包含以下这段javascript代
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
javascript实现页面输出Code128条码；div绘图模式；无需字体库； 使用方法： Barcode.create({options}).encode("string", type).tostring(); options: barWidth: 条码宽度，必须为1px的整数倍； barHeight：条码...
1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
12.6.2 改变图片的高度和宽度属性 12.7 应知应会 练习 第13章 事件处理 13.1 事件处理函数介绍 13.2 事件处理的内联模型 13.2.1 HTML和事件处理函数 13.2.2 设置事件处理函数...
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...