获取页面可见区域,屏幕区域的尺寸
生活随笔
收集整理的這篇文章主要介紹了
获取页面可见区域,屏幕区域的尺寸
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在設計網頁時,常常需要考慮頁面可見區域的寬度及高度,以便調整頁面元素的相對位置. 例如創建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>
轉載于:https://www.cnblogs.com/flaaash/archive/2008/01/16/1041035.html
總結
以上是生活随笔為你收集整理的获取页面可见区域,屏幕区域的尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习的练功方式（四）——KNN算法
- 下一篇： android视频播放器api,03.视