Javascript獲取各種瀏覽器可見窗口大小

網頁可見區域寬: document.body.clientWidth
網頁可見區域高: document.body.clientHeight
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬)
網頁可見區域高: document.body.offsetHeight (包括邊線的高)
網頁正文全文寬: document.body.scrollWidth
網頁正文全文高: document.body.scrollHeight
網頁被卷去的高: document.body.scrollTop
網頁被卷去的左: document.body.scrollLeft
網頁正文部分上: window.screenTop
網頁正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的寬: window.screen.width
屏幕可用工作區高度: window.screen.availHeight
屏幕可用工作區寬度: window.screen.availWidth
 
網頁可見區域寬: document.body.clientWidth
網頁可見區域高: document.body.clientHeight
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬)
網頁可見區域高: document.body.offsetHeight (包括邊線的高)
網頁正文全文寬: document.body.scrollWidth
網頁正文全文高: document.body.scrollHeight
網頁被卷去的高: document.body.scrollTop
網頁被卷去的左: document.body.scrollLeft
網頁正文部分上: window.screenTop
網頁正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的寬: window.screen.width
屏幕可用工作區高度: window.screen.availHeight
屏幕可用工作區寬度: window.screen.availWidth
網頁可見區域寬: document.body.clientWidth
網頁可見區域高: document.body.clientHeight
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬)
網頁可見區域高: document.body.offsetHeight (包括邊線的高)
網頁正文全文寬: document.body.scrollWidth
網頁正文全文高: document.body.scrollHeight
網頁被卷去的高: document.body.scrollTop
網頁被卷去的左: document.body.scrollLeft
網頁正文部分上: window.screenTop
網頁正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的寬: window.screen.width
屏幕可用工作區高度: window.screen.availHeight
屏幕可用工作區寬度: window.screen.availWidth
 
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 獲取對象的滾動高度。 
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 
scrollWidth:獲取對象的滾動寬度 
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度 
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 
event.clientX 相對文檔的水平座標 
event.clientY 相對文檔的垂直座標 
event.offsetX 相對容器的水平坐標 
event.offsetY 相對容器的垂直坐標 
document.documentElement.scrollTop 垂直方向滾動的值 
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
 
  例子
 

IE6/7/8:對於沒有doctype聲明的頁面裡可以使用  document.body.scrollTop 來獲取 scrollTop高度 ;
對於有doctype聲明的頁面則可以使用 document.documentElement.scrollTop  ;
Safari:safari 比較特別,有自己獲取scrollTop的函數 : window.pageYOffset ;
Firefox:火狐等等相對標準些的瀏覽器就省心多瞭,直接用 document.documentElement.scrollTop ;
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
 

有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高)
 

判斷瀏覽器的類型:
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

  

摘自 水淼
 

發佈留言