js 中offsetTop、offsetLeft、offsetWidth、offsetHeight详解

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也包括水平滚动条的高度

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

有滚动条的情况

<div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black; overflow: scroll;"></div>    <script>//IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中，width和height的值仍然是100px；//而其他浏览器则把垂直滚动条的宽度从width宽度中移出，把水平滚动条的高度从height高度中移出，则滚动条宽度为17px，width宽度和height高度为剩下的83pxif(window.getComputedStyle){    console.log(getComputedStyle(test).width,getComputedStyle(test).height)//83px}else{    console.log(test.currentStyle.width,test.currentStyle.height);//100px}//122=1+10+100+10+1console.log(test.offsetWidth,test.offsetHeight);</script>

【3】offsetTop： 表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
【4】offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

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

注：

【1】所有偏移量属性都是只读的

<div id="test" style="width:100px; height:100px; margin:10px;"></div>        <script>console.log(test.offsetWidth);//100//IE8-浏览器会报错，其他浏览器则静默失败test.offsetWidth = 10;console.log(test.offsetWidth);//100</script>

【2】如果给元素设置了display:none，则它的偏移量属性都为0

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

【3】每次访问偏移量属性都需要重新计算

<div id="test" style="width:100px; height:100px; margin:10px;"></div>        <script>console.time("time");var a = test.offsetWidth;for(var i = 0; i < 100000; i++){    var b = a;}console.timeEnd('time');//1.428ms</script>

文章转载至：http://www.cnblogs.com/xiaohuochai/p/5828369.html