获取元素尺寸宽高

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>获取元素尺寸宽高</title>
 7 </head>
 8     <style>
 9         #div{
10             background-color: #00ff00;
11             width: 60px;
12             height: 60px;
13             padding: 20px;
14             margin: 20px;
15             border: 20px solid #00ffff;
16         }
17     </style>
18 <body>
19     
20     <div id="div">Prosper</div>
21 
22     <script>
23     /**
24      * 获取元素尺寸宽高(不包含margin)
25      */
26     Element.prototype.getElementOffset = function () {
27         var objData = this.getBoundingClientRect();
28         if (objData.width) {
29             return {
30                 w: objData.width,
31                 h: objData.height
32             }
33         } else {
34             return {
35                 w: objData.right - objData.left,
36                 h: objData.top - objData.bottom
37             }
38         }
39     }
40     console.log(document.getElementById('div').getElementOffset());
41     </script>
42 </body>
43 
44 </html>