获取窗口宽高信息


要获取文件宽高信息,可以使用的特性有:

  • 要获取 HTML 文件宽高,可以在 document.documentElement 以 scrollWidth、scrollHeight 获取。
  • 要获取 body 宽高,则可以使用 document.body 的 scrollWidth、scrollHeight 获取。

要获取屏幕的宽高信息,可以使用的特性有:

  • 要获取屏幕的宽高,可以使用 screen 的 width、height 获取。
  • 要获取屏幕可用局部的宽高,不含工具栏的范围,可在 screen 的 availWidth、availHeight 获取。

浏览器宽高等相关的信息,可以在window对象上获取:

  • 窗口在屏幕中的位置:screenX、screenY
  • 窗口宽、高:outerWidth、outerHeight
  • 视埠局部宽高(不包括菜单、工具栏、卷轴):innerWidth、innerHeight
  • 水平、垂直卷轴位置:pageXOffset、pageYOffset

下面这个范例,结合目前看过的一些样式设定与宽高信息,可模拟独占(Modal)对话框,在一开始显示一个消息,按下确定钮后才能操作文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
        #message1 {
            text-align: center;
            vertical-align: middle;
            color: #ffffff;
            background-color: #ff0000;
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>

    这些是一些文本<br>这些是一些文本<br>这些是一些文本<br>
    <button>其他控件</button>
    <div id="message1">
        看点广告吧!<br><br>
        <button id="confirm">确定</button>
    </div>

<script type="text/javascript">

    function style(elem, prop) {
        return window.getComputedStyle(elem, null)[prop];
    }

    // value 未指定时,用来获取不透明度
    function opacity(elem, value) {
        if(value === undefined) { 
            let opt = style(elem, 'opacity');
            return opt === '' ? 1 : parseFloat(opt);
        } else {
            elem.style.opacity = value;
        }
    }

    class Dimension {
        static screen() {
            return {
                width: screen.width,
                height: screen.height
            };
        }

        static screenAvail() {
            return {
                width: screen.availWidth,
                height: screen.availHeight
            };        
        }

        static browser() {
            return {
                width: window.outerWidth,
                height: window.outerHeight
            };
        }

        static html() {
            return {
                width: window.documentElement.scrollWidth,
                height: window.documentElement.scrollHeight
            };        
        }

        static body() {
            return {
                width: window.body.scrollWidth,
                height: window.body.scrollHeight
            };        
        }

        static viewport() {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            };        
        }
    }

    class Coordinate {
        static browser() {
            return {
                x: window.screenX,
                y: window.screenY
            };                
        }

        static scroll() {
            return {
                x: window.pageXOffset,
                y: window.pageYOffset
            };        
        }
    }

    let message1 = document.getElementById('message1');
    opacity(message1, 0.5);

    let {width, height} = Dimension.viewport();

    message1.style.width = `${width}px`;
    message1.style.paddingTop = `${height / 2}px`;
    message1.style.height = `${height / 2}px`;

    document.getElementById('confirm').onclick = function() {
        message1.style.width = '0px';
        message1.style.height = '0px';
        message1.style.paddingTop = '0px';
        message1.style.display = 'none';
    };

</script>

</body>
</html>

按此观看结果


展开阅读全文