js中offsetWidth使用方法教程

javascript中offsetWidth使用方法教程，可以得到元素的大小宽度和高度是包含padding + border + width

1.     <style>
   
2.         * {
   
3.             margin: 0;
   
4.             padding: 0;
   
5.         }
   
6.         
   
7.         .zidiu {
   
8.             position: relative;
   
9.             width: 200px;
   
10.             height: 200px;
    
11.             background-color: pink;
    
12.             margin-left: 100px;
    
13.             padding: 50px 50px;
    
14.         }
    
15.         
    
16.         .son {
    
17.             width: 100px;
    
18.             height: 100px;
    
19.             background-color: red;
    
20.         }
    
21.     </style>
    
22.     <div class="zidiu">
    
23.         <div class="son"></div>
    
24.     </div>
    
25.     <script>
    
26.         var div = document.querySelector('.zidiu');
    
27.         var son = document.querySelector('.son');
    
28.         console.log(son.offsetLeft);
    
29.         console.log(div.offsetWidth);
    
30.     </script>

复制代码

console.log(div.offsetWidth);输出的结果为：300
这里要注意的是返回值不带单位。