开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出_______________________________________________________________________________________
offset[Parent/Width/Height/Top/Left]
测试代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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]
测试代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>