元素的大小_为什么要定位元素大小?-CSDN博客

本文链接：https://blog.csdn.net/love_jiahua/article/details/100161557

DOM中没有规定如何获取页面中的元素的大小，为了方便开发人员的使用，IE率先引入了一些属性，目前大多数的主流浏览器都支持这些属性。

1.偏移量

偏移量（offset dimension）,主要包括元素在屏幕上占用的空间（可见）。元素的可见大小由元素的高度、宽度决定，主要包括元素的内边距，滚动条的宽高和边框的大小（外边距不属于元素的大小）。

offsetHeight

元素在垂直方向占用的空间大小，主要是像素计算。元素的高度（包括滚动的高度），上下边框的高度，上下内边距的高度。

offsetWeight

元素在水平方向占用的宽度，主要是像素计算。元素的宽度（包括滚动的宽度）,上下边框的宽度，左右内边框的宽度

offsetLeft

主要用于定位的运用，相对定位父元素的距离，元素的左边距到父元素的内边距之间的像素距离，偏移多少像素的距离

offsetTop

与offsetLeft的运用一样，主要是上外边框和父元素上内边框之间的像素距离，向下偏移多少像素。
偏移量的具体表现如图所示，offsetParent表示的是父元素

2.客户区大小

元素的客户区大小（client dimension）;表示的是元素的内容大小和内边距所占据的空间大小。

clientWidth

属性主要计算元素的内容区宽度加上左右边距的宽度 width+padding*2;

clientHeight

属性主要计算元素的内容区高度加上上下内边距的高度 height+padding*2; clientWidth和clientheight 主要表示

clientLeft

主要表示左边框的宽度

clientTop

主要表示上边框的宽度

例题

计算一个元素到页面顶部和页面左边的距离

<style>
        *{margin:0;
        padding:0;}
    .set{height:300px;
    width:300px; background-color: #f99;margin:200px auto;border: 10px solid #9f9;}
    .set1{width:200px; height:200px;background-color: antiquewhite;position:relative; border:10px solid #000;}
    .set2{width:100px;height:100px; background:#f90;position:absolute; left:20px ;top:20px;}

    </style>
</head>
<body>
    <div class="set">
       <div class="set1">
          <div class="set2"></div>
       </div>
    </div>
    <script>
     var sett=document.querySelector(".set2");
     var obj={

         left:sett.offsetLeft,
         top:sett.offsetTop
     }
    sett=sett.offsetParent;
    while(sett!=document.body){
       console.log(sett.offsetParent);
       obj.left+=sett.offsetLeft+sett.clientLeft;
       obj.top+=sett.offsetTop+sett.clientTop;
       sett=sett.offsetParent;
    }
    console.log(obj);
    </script>
</body>