获取元素尺寸宽高
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>
以上是关于获取元素尺寸宽高的主要内容，如果未能解决你的问题，请参考以下文章