取得視窗維度資訊


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

  • 要取得 HTML 文件寬高,可以在 document.documentElementscrollWidthscrollHeight 取得。
  • 要取得 body 寬高,則可以使用 document.bodyscrollWidthscrollHeight 取得。

要取得螢幕的寬高資訊,可以使用的特性有:

  • 要取得螢幕的寬高,可以使用 screenwidthheight 取得。
  • 要取得螢幕可用區域的寬高,不含工具列的範圍,可在 screenavailWidthavailHeight 取得。

瀏覽器寬高等相關的資訊,可以在 window 物件上取得:

  • 視窗在螢幕中的位置:screenXscreenY
  • 視窗寬、高:outerWidthouterHeight
  • 視埠區域寬高(不包括選單、工具列、捲軸):innerWidthinnerHeight
  • 水平、垂直捲軸位置:pageXOffsetpageYOffset

下面這個範例,結合目前看過的一些樣式設定與維度資訊,可模擬獨佔(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>

按此觀看結果