DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS獲取各種浏覽器窗口大小的方法
JS獲取各種浏覽器窗口大小的方法
編輯:JavaScript綜合知識     

 本篇文章主要是對JS 獲取各種浏覽器窗口大小的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

常用: JS 獲取浏覽器窗口大小   代碼如下: // 獲取窗口寬度  if (window.innerWidth)  winWidth = window.innerWidth;  else if ((document.body) && (document.body.clientWidth))  winWidth = document.body.clientWidth;  // 獲取窗口高度  if (window.innerHeight)  winHeight = window.innerHeight;  else if ((document.body) && (document.body.clientHeight))  winHeight = document.body.clientHeight;  // 通過深入 Document 內部對 body 進行檢測,獲取窗口大小  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)  {  winHeight = document.documentElement.clientHeight;  winWidth = document.documentElement.clientWidth;  }    詳細: 關於獲取各種浏覽器可見窗口大小:  <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高)  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved