Left] 、 Element.getBoundingClientRect()

开篇提示：以下内容都经个人测试，参考API文档总结，但还是不能保证完全正确，若有错误，还请留言指出_______________________________________________________________________________________

offset[Parent/Width/Height/Top/Left]

测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试偏移量</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 500px;
                height: 400px;
                margin: 10px;
                text-align: right;
                overflow: hidden;  /* 暂时用这个来消除浮动和消除边距合并问题*/
                background-color: #5ac770;
                /*position: relative;*/   /* 测试 offsetParent*/
            }
            #div2{
                float: left;
                width: 300px;
                height: 300px;
                padding: 15px;
                margin: 5px 10px;
                text-align: left;
                border: 10px solid darkblue;
                background-color: palevioletred;
            }        
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                offset[////]<br /><br />
                width: 300px;<br />
                height:300px;<br /><br />
                margin: 5px 10px;<br />
                padding: 15px;<br /><br />
                border: 10px solid darkblue;<br />
                background-color: #5ac770;<br />
            </div><br />
                margin: 10px;<br /><br />
        </div>
    </body>
    <script>
        var div2 = document.getElementById("div2");
        
        console.log("\noffset相关描述 :")
        console.log("\n渲染模式(BackCompat:怪异模式/CSS1Compat:标准模式) ： " + document.compatMode);
        
        console.log("\noffsetParent.nodeName : " + div1.offsetParent.nodeName + "(测试结果与API文档描述不符)");
        console.log("HTMLElement.offsetParent 是一个只读属性，\n返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。\n如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。\n当元素的 style.display 设置为 'none' 时，offsetParent 返回 null。\noffsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。");
        
        console.log("\noffsetWidth : " + div2.offsetWidth + "px " + " //width + padding + border + scroolbar(竖直滚动条，如果存在的话)");
        console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同");
        
        console.log("\noffsetHeight : " + div2.offsetHeight + "px " + " //height + padding + border + scroolbar(水平滚动条，如果存在的话)");
        console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同");
        
        console.log("\noffsetTop : " + div2.offsetTop + "px " + "//自身margin:5px + 父元素margin:10px");
        console.log("只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。");
        
        console.log("\noffsetLeft : " + div2.offsetLeft + "px " + "//自身margin:10px + 父元素margin:10px");
        console.log("只读属性，返回当前元素左上角相对于offsetParent 节点的左边界偏移的像素值。")
        
    </script>
</html>

View Code

浏览器界面：

console控制台：

_______________________________________________________________________________________

client[Width/Height/Top/Left]

测试代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>client[Width/Height/Top/Left]</title>
        <style type="text/css">
            #clientTest{
                width: 300px;
                height: 300px;
                padding: 20px;
                margin: 20px;
                overflow: auto;
                background-color: #8FBC8F;
                border: 10px solid royalblue;
            }
        </style>
    </head>    
    <body>
        <div id="clientTest">
            client[Width/Height/Top/Left]<br /><br />
            width: 300px;<br />
            height: 300px;<br /><br />
            margin: 20px;<br />
            padding: 20px;<br /><br />
            overflow: auto;<br /><br />
            background-color: #8FBC8F;<br />
            border: 10px solid royalblue;
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </body>
    <script type="text/javascript">
        var client = document.getElementById("clientTest");
        
        console.log("\nclient相关距离：");
        console.log("\nclientWidth : " + client.clientWidth + "px " +" // width + padding-left + padding-right - scrollBar(如果存在的话)");
        console.log("只读属性,表示元素的内部宽度，以px计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。");
        
        console.log("\nclientHeight : " + client.clientHeight + "px " +" // height + padding-left + paading-right - scrollBar(如果存在的话)");
        console.log("只读属性,表示元素的内部宽度，以px计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。");
        
        console.log("\nclientLeft : " + client.clientLeft + "px " +" // border-left ");
        console.log("只读属性，一个元素left边框的宽度（以PX表示）。不包括顶部外边距或内边距。(说白了就是border-left)");
        
        console.log("\nclientTop : " + client.scra + "px " +" // border-top ");
        console.log("只读属性，一个元素top边框的宽度（以PX表示）。不包括顶部外边距或内边距。(说白了就是border-top)");
    </script>
</html>

View Code

浏览器界面：

控制台显示：

_______________________________________________________________________________________

Element.getBoundingClientRect()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #testBox{width: 100px;height: 200px;border: 2px solid red;margin:100px;}
        </style>
    </head>
    <body>
        <div id="testBox"></div>
    </body>
    
    <script type="text/javascript">
        var testBox = document.getElementById("testBox");
        var message = testBox.getBoundingClientRect();
        
        console.log(message);
        console.log("// 返回一组用于描述该元素边界距离(待解释)的只读属性集合,");
        console.log("// 边界外距离:指该元素与浏览器边框的距离，left、top、right、bottom（不含元素边框）");
        console.log("// 边界内距离：就是指元素的宽高，width、height、（包含边框）,");
        
        console.log("\neg:")
        console.log("top ：" + message.top + "px  //通过‘.top’单独获取一个值");
        console.log("right ：" + message.right + "px  //通过‘.right’单独获取一个值");
        console.log("其他同理");
    </script>
</html>