码迷,mamicode.com
首页 > 其他好文 > 详细

获取元素尺寸宽高

时间:2018-08-02 01:57:38      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:ros   data   console   his   height   code   htm   不包含   bsp   

 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>

 

获取元素尺寸宽高

标签:ros   data   console   his   height   code   htm   不包含   bsp   

原文地址:https://www.cnblogs.com/lprosper/p/9404522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!