| 導購 | 订阅 | 在线投稿
分享
 
 
 

Javascript页面宽度高度

2008-09-09 07:29:22  編輯來源:互聯網  简体版  手機版  評論  字體: 小|中|大
 
　　关于获取各种浏览器可见窗口大小的一点点研究

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

　　真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
 
 
 
猜你喜欢
关于获取各种浏览器可见窗口大小的一点点研究 <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" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> 如果在页面中添加这行标记的话 在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高） 真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号 wangchaonetcn
 
　　免责声明：本文仅代表作者个人观点，与王朝网络无关。王朝网络登载此文出于传递更多信息之目的，并不意味著赞同其观点或证实其描述，其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有