对js中的各种宽高理解-原创手记-慕课网

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>各种宽高的理解</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0
            }

            #test {
                width: 100px;
                height: 100px;
                padding: 10px;
                margin: 10px;
                border: 1px solid blue;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <div id="test">
            <div style="height: 200px;"></div>
        </div>
        <script type="text/javascript">
            //以下说明只在谷歌浏览器有效，其他浏览器略有差别
            var test = document.getElementById("test");
            console.log(test.clientHeight + '-' + test.clientWidth); //120---103
            console.log(test.clientLeft + '-' + test.clientTop); //1---1
            //clientHeight,clientWidth指的是元素可视部分的宽高，即等于padding+content；
            //如果有滚条，需要减去滚动条的宽高。
            //clientLeft，clientTop返回的是元素周围边框的厚度。
            console.log("-------------------------");
            console.log(test.offsetHeight + '-' + test.offsetWidth); //122---122
            console.log(test.offsetLeft + '-' + test.offsetTop); //10---10
            console.log(test.offsetParent);
            //offsetHeight,offsetWidth. 等于padding+content+border；
            //offsetLeft,offsetTop为相对于offsetParent的偏移量
            //他们与是否有滚动条无关
            console.log("-------------------------");
            console.log(test.scrollHeight + '-' + test.scrollWidth); //220---103
            console.log(test.scrollLeft + '-' + test.scrollTop); //0---0
            //scrollHeight,scrollWidth指的是元素实际的宽高,即等于padding+content；
            //如果有滚条，需要减去滚动条的宽高。
            //scrollLeft，scrollTop指的是元素被卷起的宽高，可读可写
            test.onclick = function(event) {
                    var e = event || window.event;
                    console.log("event的五种坐标----");
                    console.log(event.clientX + 'client坐标' + event.clientY);
                    console.log(event.offsetX + 'offset坐标' + event.offsetY);
                    console.log(event.pageX + 'page坐标' + event.pageY);
                    console.log(event.screenX + 'screen坐标' + event.screenY);
                    console.log(event.x + '坐标' + event.y);
                }
                //event.clientX,event.clientY---相对于浏览器可视区左上角的坐标
                //event.offsetX,event.offsetY---相对于事件源左上角的坐标
                //event.pageX,event.pageY---相对于整个网页左上角的坐标
                //event.screenX,event.screenY---相对于设备屏幕左上角的坐标
                //event.x,event.y---与client坐标相同
            console.log(window.innerHeight + '-' + window.innerWidth);
            //窗口的宽高，不包括菜单栏
            console.log(window.outerHeight + '-' + window.outerWidth);
            //整个窗口的宽高，包括窗口的一切
            console.log(window.screenLeft + '-' + window.screenTop);
            //窗口距离屏幕左边和上边的距离
            console.log(window.screen.availWidth + '-' + window.screen.availHeight);
            //屏幕的宽高
            console.log(window.screen.availLeft + '-' + window.screen.availTop); //为0
        </script>
    </body>

</html>