HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的(译者注：各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。

offsetHeight属性与offsetWidth类似。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name=\'viewport\' content=\'width=device-width\' />
  7.     <style>
  8.         html,
  9.         body {
  10.             margin: 0;
  11.             padding: 0;
  12.             height: 1000px;
  13.  
  14.         }
  15.  
  16.         #div1{
  17.             width:200px;
  18.             height:200px;
  19.             background-color:purple;
  20.            
  21.         }
  22.     </style>
  23.     <script>
  24.         window.onload=function(){
  25.             var oDiv=document.getElementById(\'div1\');
  26.             setInterval(function(){
  27.                 oDiv.style.width=oDiv.offsetWidth-1+\'px\';
  28.             },30)
  29.         }
  30.     </script>
  31. </head>
  32.  
  33. <body>
  34. <div id=\'div1\'></div>
  35.  
  36. </body>
  37.  
  38. </html>

　　

 

  div增加一段border样式后：

  1. border:1px solid black;

刷新页面：

 

版权声明：本文为f6056原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/f6056/p/11326640.html