javascript 元素对象拥有offset家族5大属性(offset家族和position紧密相连)
offsetWidth:"元素内容的宽度" （border+padding+width）
offsetHeight:"元素内容的高度" (border+padding+height)
offsetLeft:"元素与浏览器客户端左侧的距离" (与其父级层级最近的定位元素左侧距离)
offsetTop:"元素与浏览器客户端顶侧的距离" (与其父级层级最近的定位元素顶侧距离)
offsetParent:"元素父级元素" (得到其父级层级最近的定位元素对象)
运行下列代码尝试一下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>offset</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 } 14 15 .box { 16 border: 2px solid #caa; 17 padding: 1px; 18 width: 200px; 19 height: 200px; 20 background-color: yellow; 21 } 22 23 .bigbox { 24 margin: 100px; 25 width: 200px; 26 height: 200px; 27 position: relative; 28 padding: 10px; 29 border: 1px solid red; 30 } 31 32 .mask { 33 position: fixed; 34 right: 0; 35 bottom: 0; 36 width: 200px; 37 height: 200px; 38 background-color: red; 39 } 40 </style> 41 </head> 42 43 <body> 44 <div id="j_mask" class="mask"></div> 45 <div id="j_bigbox" class="bigbox"> 46 <div id="j_box" class="box"></div> 47 </div> 48 <button id="j_btnoffset">offset</button> 49 <button id="j_btnoffsetParent">offsetParent</button> 50 </body> 51 52 </html> 53 <script> 54 (function () { 55 var j_btnoffset = document.getElementById("j_btnoffset"), 56 j_box = document.getElementById("j_box"), 57 j_bigbox = document.getElementById("j_bigbox"), 58 j_mask = document.getElementById("j_mask"), 59 j_btnoffsetParent = document.getElementById("j_btnoffsetParent"); 60 j_btnoffset.onclick = function () { 61 var strHtml = "<p>"; 62 63 strHtml += "offsetWidth : " + j_box.offsetWidth + ""; 64 strHtml += "</p>" 65 strHtml += "<p>"; 66 strHtml += "offsetHeight : " + j_box.offsetHeight + ""; 67 strHtml += "</p>"; 68 strHtml += "<p>"; 69 strHtml += "offsetLeft : " + j_box.offsetLeft + ""; 70 strHtml += "</p>"; 71 strHtml += "<p>"; 72 strHtml += "offsetTop : " + j_box.offsetTop + ""; 73 strHtml += "</p>"; 74 75 j_mask.innerHTML = strHtml; 76 }; 77 j_btnoffsetParent.onclick = function () { 78 console.log(j_box.offsetParent); 79 } 80 }()); 81 82 </script>
注：当父级到body时，则以body为参照物