取得視窗維度資訊

要取得文件寬高資訊，可以使用的特性有：

要取得 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>

按此觀看結果。