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

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