1. 偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight

元素：內容大小（width、height）、內邊距（padding）、邊框（border）、外邊距（margin）、滾動條（scroll）

【1】offsetWidth：元素在水平方向上占據的大小，無單位

offsetWidth = border + 元素內容寬度 + padding

= border-left-width + padding-left- width + width + padding-right-width + border-right-width

【2】offsetHeight：元素在垂直方向上占據的大小，無單位

offsetHeight = border + 元素內容高度 + padding

= border-left-height+ padding-left- height+ height+ padding-height-width + border-right-height

註：1. 如果存在垂直滾動條，offsetWidth也包括垂直滾動條的寬度；

2. 如果存在水平滾動條，offsetHeight也包括水平滾動條的高度

1. <div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black;"></div>
2. <script>
3. //122=1+10+100+10+1
4. console.log(test.offsetWidth);
5. console.log(test.offsetHeight);
6. </script>

有滾動條的情況

1. <div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black; overflow: scroll;"></div>
2. <script>
3. //IE8-瀏覽器將垂直滾動條的寬度計算在width寬度和height高度中，width和height的值仍然是100px；
4. //而其他瀏覽器則把垂直滾動條的寬度從width寬度中移出，把水平滾動條的高度從height高度中移出，則滾動條寬度為17px，width寬度和height高度為剩下的83px
6. if(window.getComputedStyle){
7. console.log(getComputedStyle(test).width,getComputedStyle(test).height)//83px
8. }else{
9. console.log(test.currentStyle.width,test.currentStyle.height);//100px
10. }
11. //122=1+10+100+10+1
12. console.log(test.offsetWidth,test.offsetHeight);
13. </script>

【3】offsetTop： 表示元素的上外邊框至offsetParent元素的上內邊框之間的像素距離
【4】offsetLeft：表示元素的左外邊框至offsetParent元素的左內邊框之間的像素距離

1. <div id="out" style="padding: 5px;position: relative;background-color: pink;margin: 6px;border:1px solid black">
2. <div id="test" style="width:100px; height:100px; margin:10px;background-color:green;"></div>
3. </div>
4. <script>
5. //15=test.marginTop(10) + out.paddingTop(5)
6. alert(test.offsetTop);
7. //15=test.marginLeft(10) + out.paddingLeft(5)
8. alert(test.offsetLeft);
9. </script>

註：

【1】所有偏移量屬性都是只讀的

1. <div id="test" style="width:100px; height:100px; margin:10px;"></div>
2. <script>
3. console.log(test.offsetWidth);//100
4. //IE8-瀏覽器會報錯，其他瀏覽器則靜默失敗
5. test.offsetWidth = 10;
6. console.log(test.offsetWidth);//100
7. </script>

【2】如果給元素設置了display:none，則它的偏移量屬性都為0

1. <div id="test" style="width:100px; height:100px; margin:10px;display:none"></div>
2. <script>
3. console.log(test.offsetWidth);//0
4. console.log(test.offsetTop);//0
5. </script>

【3】每次訪問偏移量屬性都需要重新計算

1. <div id="test" style="width:100px; height:100px; margin:10px;"></div>
2. <script>
3. console.time("time");
4. var a = test.offsetWidth;
5. for(var i = 0; i < 100000; i++){
6. var b = a;
7. }
8. console.timeEnd(‘time‘);//1.428ms
9. </script>

js 中offsetTop、offsetLeft、offsetWidth、offsetHeight詳解