获取页面可见区域,屏幕区域的尺寸
在设计网页时,常常需要考虑页面可见区域的宽度及高度,以便调整页面元素的相对位置. 例如创建2个div,使得高度上各占页面高度的50%,如何实现? 下面是一个页面区域的测试样例,参考即可实现:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> document.body对象, window对象尺寸信息</TITLE>
<META NAME="Author" CONTENT="许明会">
<META NAME="Keywords" CONTENT="clientHeight screen body">
<META NAME="Description" CONTENT="获取网页区域,屏幕区域">
<script type="text/javascript">
function displayScreenSize()
{
//alert("heelo0");
var bodyWidth =document.body.clientWidth; //网页可见区域宽
var bodyHeight =document.body.clientHeight; //网页可见区域高
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽)
var bodyHeightWithBorder =document.body.offsetHeight; //网页可见区域高(包括边线的宽)
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽
var bodyHeightWithScroll =document.body.scrollHeight; //网页正文全文高
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距
var windowLeftWidth =window.screenLeft; //网页正文部分左边距
var windowTopHeight =window.screenTop; //网页正文部分上边距
var screenWidth =window.screen.width; //屏幕分辨率的宽
var screenHeight =window.screen.height; //屏幕分辨率的高
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度
var info = "";
info +="document.body.clientWidth:"+bodyWidth + "<br/>" ;
info +="document.body.clientHeight:"+bodyHeight + "<br/>"
info +="<br/>"
info +="document.body.offsetWidth:"+bodyWidthWithBorder + "<br/>"
info +="document.body.offsetHeight:"+bodyHeightWithBorder + "<br/>"
info +="<br/>"
info +="document.body.scrollWidth:"+bodyWidthWithScroll + "<br/>"
info +="document.body.scrollHeight:"+bodyHeightWithScroll + "<br/>"
info +="document.body.scrollTop:"+bodyTopHeight + "<br/>"
info +="document.body.scrollLeft:"+bodyLeftWidth + "<br/>"
info +="<br/>"
info +="window.screenTop:"+windowLeftWidth + "<br/>"
info +="window.screenLeft:"+windowTopHeight + "<br/>"
info +="<br/>"
info +="window.screen.width:"+screenWidth + "<br/>"
info +="window.screen.height:"+screenHeight + "<br/>"
info +="window.screen.availHeight:"+screenAvailHeight + "<br/>"
info +="window.screen.availWidth:" +screenAvailWidth + "<br/>"
info +="<br/>"
document.all("divInfo").innerHTML = info;
}
</script>
</HEAD>
<BODY onresize="displayScreenSize();">
<div id="divInfo">
</div>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> document.body对象, window对象尺寸信息</TITLE><META NAME="Author" CONTENT="许明会"><META NAME="Keywords" CONTENT="clientHeight screen body"><META NAME="Description" CONTENT="获取网页区域,屏幕区域"><script type="text/javascript">
function displayScreenSize() {
//alert("heelo0"); var bodyWidth =document.body.clientWidth; //网页可见区域宽 var bodyHeight =document.body.clientHeight; //网页可见区域高 var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽) var bodyHeightWithBorder =document.body.offsetHeight; //网页可见区域高(包括边线的宽) var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽 var bodyHeightWithScroll =document.body.scrollHeight; //网页正文全文高 var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距 var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距 var windowLeftWidth =window.screenLeft; //网页正文部分左边距 var windowTopHeight =window.screenTop; //网页正文部分上边距 var screenWidth =window.screen.width; //屏幕分辨率的宽 var screenHeight =window.screen.height; //屏幕分辨率的高 var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度 var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度 var info = ""; info +="document.body.clientWidth:"+bodyWidth + "<br/>" ; info +="document.body.clientHeight:"+bodyHeight + "<br/>" info +="<br/>" info +="document.body.offsetWidth:"+bodyWidthWithBorder + "<br/>" info +="document.body.offsetHeight:"+bodyHeightWithBorder + "<br/>" info +="<br/>" info +="document.body.scrollWidth:"+bodyWidthWithScroll + "<br/>" info +="document.body.scrollHeight:"+bodyHeightWithScroll + "<br/>" info +="document.body.scrollTop:"+bodyTopHeight + "<br/>" info +="document.body.scrollLeft:"+bodyLeftWidth + "<br/>" info +="<br/>" info +="window.screenTop:"+windowLeftWidth + "<br/>" info +="window.screenLeft:"+windowTopHeight + "<br/>" info +="<br/>" info +="window.screen.width:"+screenWidth + "<br/>" info +="window.screen.height:"+screenHeight + "<br/>" info +="window.screen.availHeight:"+screenAvailHeight + "<br/>" info +="window.screen.availWidth:" +screenAvailWidth + "<br/>" info +="<br/>" document.all("divInfo").innerHTML = info; }</script></HEAD><BODY onresize="displayScreenSize();"><div id="divInfo"></div></BODY></HTML>
