开篇提示：以下内容都经个人测试，参考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 /> 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(" offset相关描述 :") console.log(" 渲染模式(BackCompat:怪异模式/CSS1Compat:标准模式) ： " + document.compatMode); console.log(" offsetParent.nodeName : " + div1.offsetParent.nodeName + "(测试结果与API文档描述不符)"); console.log("HTMLElement.offsetParent 是一个只读属性， 返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。 如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。 当元素的 style.display 设置为 'none' 时，offsetParent 返回 null。 offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。"); console.log(" offsetWidth : " + div2.offsetWidth + "px " + " //width + padding + border + scroolbar(竖直滚动条，如果存在的话)"); console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同"); console.log(" offsetHeight : " + div2.offsetHeight + "px " + " //height + padding + border + scroolbar(水平滚动条，如果存在的话)"); console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同"); console.log(" offsetTop : " + div2.offsetTop + "px " + "//自身margin:5px + 父元素margin:10px"); console.log("只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。"); console.log(" offsetLeft : " + div2.offsetLeft + "px " + "//自身margin:10px + 父元素margin:10px"); console.log("只读属性，返回当前元素左上角相对于offsetParent 节点的左边界偏移的像素值。") </script> </html>
浏览器界面：
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 /> 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(" client相关距离："); console.log(" clientWidth : " + client.clientWidth + "px " +" // width + padding-left + padding-right - scrollBar(如果存在的话)"); console.log("只读属性,表示元素的内部宽度，以px计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。"); console.log(" clientHeight : " + client.clientHeight + "px " +" // height + padding-left + paading-right - scrollBar(如果存在的话)"); console.log("只读属性,表示元素的内部宽度，以px计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。"); console.log(" clientLeft : " + client.clientLeft + "px " +" // border-left "); console.log("只读属性，一个元素left边框的宽度（以PX表示）。不包括顶部外边距或内边距。(说白了就是border-left)"); console.log(" clientTop : " + client.scra + "px " +" // border-top "); console.log("只读属性，一个元素top边框的宽度（以PX表示）。不包括顶部外边距或内边距。(说白了就是border-top)"); </script> </html>
浏览器界面：
控制台显示：
_______________________________________________________________________________________
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(" eg:") console.log("top ：" + message.top + "px //通过‘.top’单独获取一个值"); console.log("right ：" + message.right + "px //通过‘.right’单独获取一个值"); console.log("其他同理"); </script> </html>
浏览器界面：(只截取了浏览器的左右上部分)
控制台显示：
最后来一张图，可以对着名字看着理解：
