js 中offsetTopoffsetLeftoffsetWidthoffsetHeight详解

Posted blingsun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 中offsetTopoffsetLeftoffsetWidthoffsetHeight详解相关的知识,希望对你有一定的参考价值。

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  
  5.   
  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 中offsetTopoffsetLeftoffsetWidthoffsetHeight详解的主要内容,如果未能解决你的问题,请参考以下文章

如何将 lib.js 文件中的 Discord.js 函数调用到 index.js 中?

请问一个js文件中如何调用另一个js文件的方法

怎么调用外部js文件?

如何在js文件中调用另一个js中的方法(详细请进)

angular7中引入外部js文件

一个js方法中怎么调用另一个js文件