offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/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>

浏览器界面：

offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

console控制台：

offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

_______________________________________________________________________________________

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>

浏览器界面：

offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

控制台显示：

offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

_______________________________________________________________________________________

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>