获取元素尺寸宽高

最新推荐文章于 2024-07-29 16:54:02 发布

qq_45670012

最新推荐文章于 2024-07-29 16:54:02 发布

阅读量63

点赞数

分类专栏：前端文章标签： h5

原文链接：https://www.mk2048.com/blog/blog.php?id=hh00c12b1kcb&title=%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%B0%BA%E5%AF%B8%E5%AE%BD%E9%AB%98

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

 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>