1 offsetParent 获取离元素最近的有定位的父级
特点：一层层往上找，知道找到最近的有定位的父级后返回这个父级
如果父级都没有定位，返回body(IE8+)
注意： 1 遵循一个原则，父级一定要给一个定位
2 body 是没有 offsetParent
<div id="box4">box4 <div id="box3">box3 <div id="box2">box2 <div id="box1">box1</div> </div> </div> </div> <script type="text/javascript"> var box1=document.getElementById("box1"); var box3=document.getElementById("box3"); console.log(box1.offsetParent); // box2 box1.offsetParent.style.borderColor="green"; console.log(document.body.offsetParent); // null
2 offsetLeft 找到元素最左边离最近的有定位的父级之间的距离，不带单位，不带边框
3 offsetTop 找到元素最上边离最近的有定位的父级之间的距离，不带单位，不带边框
注意: 1 如果没有定位父级，那默认是到html的距离
2 遵循原则 给父级定位，把默认样式清掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta > <title>Document</title> <style type="text/css"> *{ margin:0; padding:0; } div{ 100px; height: 100px; border:1px solid #f00; margin:70px 0 0 70px; } #box2{ position: absolute; } </style> </head> <body> <div id="box4">box4 <div id="box3">box3 <div id="box2">box2 <div id="box1">box1</div> </div> </div> </div> </body> </html> <script type="text/javascript"> var box1=document.getElementById("box1"); var box3=document.getElementById("box3"); console.log(box1.offsetParent); // box2 box1.offsetParent.style.borderColor="green"; console.log(document.body.offsetParent); // null console.log(box3.offsetLeft);//141 console.log(box1.offsetLeft);// 70 </script>
4 offsetWidth=width+border+padding 元素的宽（包括边框和内边距），无单位
5 offsetHeight=height+border+padding 元素的高（包括边框和内边距）无单位
注意：如果存在着垂直滚动条，offsetWidth也包括垂直滚动条的距离，如果存在着水平滚动条，offsetHeight也包括水平滚动条