在javascript中得到當前窗口的高和寬
<body><SCRIPT LANGUAGE="JavaScript">
var s = "網頁可見區域寬："+ document.body.clientWidth;
s += "\r\n網頁可見區域高："+ document.body.clientHeight;
s += "\r\n網頁可見區域高："+ document.body.offsetWeight +" (包括邊線的寬)";
s += "\r\n網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)";
s += "\r\n網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n網頁被卷去的高："+ document.body.scrollTop;
s += "\r\n網頁被卷去的左："+ document.body.scrollLeft;
s += "\r\n網頁正文部分上："+ window.screenTop;
s += "\r\n網頁正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的寬："+ window.screen.width;
s += "\r\n屏幕可用工作區高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作區寬度："+ window.screen.availWidth;
s += "\r\n頁面高度："+document.documentElement.clientHeight;
alert(s);
</SCRIPT>
在取得document.body時，也要注意html頁面的DOCTYPE聲明，
1，如果!DOCTYPE聲明為<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，document.body.clientHeight在我機器頁面上取得就是1206，這顯然比“網頁可見區域高”高了許多，而document.documentElement.clientHeight顯示是610。
2，如果!DOCTYPE聲明為<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">，document.body.clientHeight的值是610，
而document.documentElement.clientHeight顯示是0。
所以我們得根據!DOCTYPE聲明來選擇document.body.clientHeight和document.documentElement.clientHeight來取得頁面高度。
以下是測試頁面的html代碼：
代碼1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY1>
sssssssssssssssssssssssss
sssssssssssssss
<BR><BR><BR><BR><BR><BR>
cvsavasvasvc<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
gggggggggggggggggggggggggggggg
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
errrrrrrrrrrrrrr
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
43tgerga
</BODY1>
<SCRIPT LANGUAGE="JavaScript">
var s = "網頁可見區域寬："+ document.body.clientWidth;
s += "\r\n網頁可見區域高："+ document.body.clientHeight;
s += "\r\n網頁可見區域高："+ document.body.offsetWeight +" (包括邊線的寬)";
s += "\r\n網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)";
s += "\r\n網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n網頁被卷去的高："+ document.body.scrollTop;
s += "\r\n網頁被卷去的左："+ document.body.scrollLeft;
s += "\r\n網頁正文部分上："+ window.screenTop;
s += "\r\n網頁正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的寬："+ window.screen.width;
s += "\r\n屏幕可用工作區高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作區寬度："+ window.screen.availWidth;
s += "\r\n行高度："+document.documentElement.clientHeight;
alert(s);
</SCRIPT>
</HTML>
代碼2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY1>
sssssssssssssssssssssssss
sssssssssssssss
<BR><BR><BR><BR><BR><BR>
cvsavasvasvc<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
gggggggggggggggggggggggggggggg
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
errrrrrrrrrrrrrr
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
43tgerga
</BODY1>
<SCRIPT LANGUAGE="JavaScript">
var s = "網頁可見區域寬："+ document.body.clientWidth;
s += "\r\n網頁可見區域高："+ document.body.clientHeight;
s += "\r\n網頁可見區域高："+ document.body.offsetWeight +" (包括邊線的寬)";
s += "\r\n網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)";
s += "\r\n網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n網頁被卷去的高："+ document.body.scrollTop;
s += "\r\n網頁被卷去的左："+ document.body.scrollLeft;
s += "\r\n網頁正文部分上："+ window.screenTop;
s += "\r\n網頁正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的寬："+ window.screen.width;
s += "\r\n屏幕可用工作區高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作區寬度："+ window.screen.availWidth;
s += "\r\n行高度："+document.documentElement.clientHeight;
alert(s);
</SCRIPT>
</HTML>
posted on 2008-07-10 22:23
分享愛的空間 閱讀(934)
評論(0) 編輯 收藏