获取元素尺寸宽高
关注我，不错过每一次更新。
获取元素尺寸宽高
ProsperLee
发布于 2018-10-24 02:45:18
发布于 2018-10-24 02:45:18
代码可运行
运行总次数：0
代码可运行
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-08-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
CSS简单入门
更多 >
腾讯云开发者
