zoukankan      html  css  js  c++  java
  • 获取页面可见区域,屏幕区域的尺寸

    在设计网页时,常常需要考虑页面可见区域的宽度及高度,以便调整页面元素的相对位置. 例如创建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."+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>

  • 相关阅读:
    SQL表结构
    Mssql 行转列
    动态Order by
    Nopi Excel导入
    使用SyncToy 同步两台机器上的文件夹
    ueditor1.4.3 在IE8下的 BUG
    WebService国内省市县接口
    AsyncTask的参数介绍
    Json分割并解析
    JQuery iframe页面操作父页面中的元素与方法
  • 原文地址:https://www.cnblogs.com/flaaash/p/1041035.html
Copyright © 2011-2022 走看看