document.body / document.ducumentElement /等获取高度和宽度的区别

document.body / document.ducumentElement /等获取高度和宽度的区别

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /**{ padding: 0; margin: 0;}*/
        body{ height: 1500px; border:3px solid #fbcb09; padding: 5px;}
        .oBox{ width: 1000px; height: 1000px;}
        #div1{ position: fixed;bottom: 0; border: 1px solid #ffe87c; }
    </style>
    <script>
        window.onload = function(){
            var a = getInfo();
            var arr = a.split(" ");
            var oDiv= document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            for(var i =0; i < arr.length;i++){
                var oLi = document.createElement('li');
                oLi.innerHTML = arr[i];
                oUl.appendChild(oLi);
            }
        }

        function getInfo(){
            str = "";
            str += "网页可见区域宽度：" + document.documentElement.clientWidth +"px,(包括padding、border、margin) ";
            str += "网页可见区域高度：" + document.documentElement.clientHeight +"px,(包括padding、border、margin) ";
            str += "网页body宽度：" + document.body.clientWidth +"px,(只包括padding) ";
            str += "网页body高度：" + document.body.clientHeight +"px,(只包括padding) ";
            str += "网页body区域宽度：" + document.body.offsetWidth +"px,(只包括padding，border） ";
            str += "网页body区域高度：" + document.body.offsetHeight +"px,(只包括padding，border） ";
            str += "网页滚动上去的高度(chrome+ie+opera)：" + document.body.scrollTop +"px ";
            str += "网页滚动上去的高度(ff)：" + document.documentElement.scrollTop +"px ";
            str += "网页滚动到左侧的宽度(chrome+ie+opera)：" + document.body.scrollLeft +"px ";
            str += "网页滚动到左侧的宽度(ff)：" + document.documentElement.scrollLeft +"px ";
            str += "网页内容宽度：" + document.body.scrollWidth +"px,（只包括padding，border） ";
            str += "网页内容高度：" + document.body.scrollHeight +"px,(只包括padding，border) ";
            str += "网页正文顶部位置：" + window.screenTop +"px(窗口距屏幕顶部的高度，非全屏时改变) ";
            str += "网页正文左侧位置：" + window.screenLeft +"px(窗口距屏幕左侧的宽度，非全屏时改变) ";
            str += "屏幕分辨率的宽：" + window.screen.width +"px ";
            str += "屏幕分辨率的高：" + window.screen.height +"px ";
            str += "屏幕可用工作区宽度：" + window.screen.availWidth +"px ";
            str += "屏幕可用工作区高度：" + window.screen.availHeight + "(屏幕分辨率高度减去了任务栏高度) " ;
            str += "屏幕设置的色彩：" + window.screen.colorDepth + "位彩色" +" ";
            str += "屏幕设置是：" + window.screen.deviceXDPI + "像素/英寸";
            return str;
        }
    </script>
</head>
<body>
<div class="oBox"></div>
<div class="oBox"></div>
<div id="div1">
    <ul></ul>
</div>
</body>
</html>