摘要：獲得各種寬高的屬性還有公式網頁可見區域高滾動條寬度測試的文字網頁可見區域寬滾動條寬度測試的文字的總高度滾動條寬度邊框寬度測試的文字的總寬度滾動條寬度邊框寬度測試的文字的解釋元素內容高度的度量，包括由于溢出導致的視圖中不可見內容滾動總高度

    body {
        padding: 50px;
        height: 500px;
        border: 1px dotted red;
        overflow: scroll;
    }
    span {
        color: blue;
    }


    
網頁可見區域高document.body.clientHeight=height + padding * 2- 滾動條寬度測試的文字12
    
網頁可見區域寬document.body.clientWidth=width + padding * 2- 滾動條寬度測試的文字12
    
body的總高度document.body.offsetHeight= height+border*2+padding*2 = clientHeight + 滾動條寬度 + 邊框寬度*2測試的文字12
    
body的總寬度document.body.offsetWidth= width+border*2+padding*2 = clientWidth + 滾動條寬度 + 邊框寬度*2測試的文字12

    scrollHeight的MDN解釋：元素內容高度的度量，包括由于溢出導致的視圖中不可見內容
    
滾動總高度document.body.scrollHeight測試的文字12
    
滾動的高度document.body.scrollTop測試的文字12
    
滾動總寬度document.body.scrollWidth測試的文字12

    
瀏覽器可視窗口的高度，不包括邊框、工具欄、調試窗口（可變）window.innerHeight測試的文字12
    
瀏覽器可視窗口的寬度，不包括邊框（可變）window.innerWidth測試的文字12
    
瀏覽器窗口的寬度，包括滾動條和邊框（可變）window.outerHeight測試的文字12
    
瀏覽器窗口的高度，包括邊框、工具欄（可變）window.outerWidth測試的文字12

    
屏幕物理分辨率高（不變）window.screen.height=window.screen.availHeight+windows上下任務欄測試的文字12
    
屏幕物理分辨率寬（不變）window.screen.width=window.screen.availHeight+windows左右任務欄測試的文字12
    
瀏覽器窗口的可用高度，不包括windows任務欄（可變）window.screen.availHeight測試的文字12
    
瀏覽器窗口的可用寬度，不包括windows任務欄（可變）window.screen.availWidth測試的文字12
    
瀏覽器窗口距離顯示屏上部高度（可變） window.screenTop測試的文字12
    
瀏覽器窗口距離顯示屏下部高度（可變） window.screenLeft測試的文字12

    function body_scroll(){
       console.log(this)
       console.log(document.body.scrollTop)
    }
    window.onload = function () {
        dataUpdate();
    }
    window.onresize = function () {
        dataUpdate();
    }
    window.onscroll = function () {
        console.log("window.onscroll")
        dataUpdate();
    }
    document.body.onclick =function () {
        dataUpdate();
    }//瀏覽器位置變化了之后我們點擊body來獲取變化

function dataUpdate() {
        var client_height = document.getElementById("span_client_height");
        client_height.innerText = document.body.clientHeight||document.documentElement.clientHeight;
        var client_width = document.getElementById("span_client_width");
        client_width.innerText = document.body.clientWidth||document.documentElement.clientWidth;

        var client_offsetHeight = document.getElementById("span_client_offsetHeight");
        client_offsetHeight.innerText = document.body.offsetHeight;
        var client_offsetWidth = document.getElementById("span_client_offsetWidth");
        client_offsetWidth.innerText = document.body.offsetWidth;

        var client_scrollHeight = document.getElementById("span_client_scrollHeight");
        client_scrollHeight.innerText = document.body.scrollHeight;
        var client_scrollTop = document.getElementById("span_client_scrollTop");
        client_scrollTop.innerText = document.body.scrollTop;
        var client_scrollWidth = document.getElementById("span_client_scrollWidth");
        client_scrollWidth.innerText = document.body.scrollWidth;

        var window_innerHeight = document.getElementById("span_inner_height");
        window_innerHeight.innerText = window.innerHeight;
        var window_innerWidth = document.getElementById("span_inner_width");
        window_innerWidth.innerText = window.innerWidth;
        var window_outerHeight = document.getElementById("span_outer_height");
        window_outerHeight.innerText = window.outerHeight;
        var window_outerWidth = document.getElementById("span_outer_width");
        window_outerWidth.innerText = window.outerWidth;


        var screen_height = document.getElementById("span_screen_height");
        screen_height.innerText = window.screen.height;
        var screen_width = document.getElementById("span_screen_width");
        screen_width.innerText = window.screen.width;
        var screen_availHeight = document.getElementById("span_screen_availHeight");
        screen_availHeight.innerText = window.screen.availHeight;
        var screen_availWidth = document.getElementById("span_screen_availWidth");
        screen_availWidth.innerText = window.screen.availWidth;
        var window_top = document.getElementById("span_window_top")
         window_top.innerText = window.screenTop
        var window_left = document.getElementById("span_window_left")
        window_left.innerText = window.screenLeft

    }

這可以查看http://jianjiacheng.com/brows...