获取元素尺寸宽高

Posted lprosper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了获取元素尺寸宽高相关的知识,希望对你有一定的参考价值。

 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>

 

以上是关于获取元素尺寸宽高的主要内容,如果未能解决你的问题,请参考以下文章

223 jQuery 尺寸位置操作

如何获取隐藏元素的宽高

JS获取display为none的隐藏元素的宽度和高度的解决方案

前端 JS 获取 Image 图像 宽高 尺寸

jq获取图片的原始尺寸,自适应布局

CSS代码片段