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>

  • 相关阅读:
    Unity3D启动时卡在Loading界面
    unity触发器碰撞调用OnTriggerStay()检查按键多次执行的问题
    Unity使用Destroy删除物体的问题
    Unity脚本设置场景环境光,实现白天晚上切换
    unity隐藏显示物体
    unity使用Vuplex的WebView嵌入网页,打包后报错进不去
    【Python】输入两个字符串,在第一字符串中删除第二个字符串中所包含的所有字符
    用until编写一段shell程序,计算1~10的平方
    用until编写一段shell程序,计算1~10的平方和
    PrismJS,一款漂亮的代码高亮工具
  • 原文地址:https://www.cnblogs.com/flaaash/p/1041035.html
Copyright © 2011-2022 走看看