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

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- 王朝網路 版權所有