js 獲取瀏覽器高度和寬度值(多瀏覽器)

轉自於:http://www.jb51.net/article/19844.htm


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


網頁可見區域寬: 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 相對文檔的水平座標+垂直方向滾動的量 

 
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
</meta></head> 
<body> 
<h2 align="center">請調整瀏覽器窗口大小</h2><hr /> 
<form action="#" method="get" name="form1" id="form1"> 
<!--顯示瀏覽器窗口的實際尺寸--> 
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"/><br /> 
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"/><br /> 
</form> 
<script type="text/javascript"> 
<!-- 
var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函數:獲取尺寸 
{ 
//獲取窗口寬度 
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; 
} 
//結果輸出至兩個文本框 
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
} 
findDimensions(); 
//調用函數,獲取數值 
window.οnresize=findDimensions; 
//--> 
</script> 
</body> 
</html> 


發佈了28 篇原創文章 · 獲贊 11 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章