JavaScript 获取元素的宽高
在JavaScript进行页面编辑时，我们经常会遇到获取页面元素宽高的情况，只不过由于太过常态化了，所以常常被我们直接忽视掉。
有关于获取元素宽高的方式有很多种，根据不同的使用情况，可以选择最适合自己的方式
jQuery
如果是使用jQuery，可以直接使用$('元素').width()和$('元素').height()的方式进行获取。
console.log(`${$('#app').width()} + ${$('#app').height()}`);
JavaScript 原生方法
style
如果使用了原生的JavaScript，可以看是否在style属性中设置值来进行获取，方式:element.style.width和element.style.height。
document.getElementById('app').style.width;
document.getElementById('app').style.height;
但是当 style 中并没有设置，只是在 CSS 中通过类或 ID 选择器进行设置，那么element.style的方式获取到的宽高就是空的。
getComputedStyle()
这里的getComputedStyle方法并不是跟随在 element 之后的，而是 window 上面的方法。
Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。 私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问。
使用方式：window.getComputedStyle(element).width或者window.getComputedStyle(element).getPropertyValue(width)
let dom = document.getElementById('app');
console.log(`${window.getComputedStyle(dom).width} + ${window.getComputedStyle(dom).height}`);
console.log(`${window.getComputedStyle(dom).getPropertyValue('width')} + ${window.getComputedStyle(dom).getPropertyValue('height')}`);
这里需要注意一点，获取到的宽高后面会带上px；并且在 IE9 以下的版本中，是不支持getComputedStyle的。
getBoundingClientRect
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
这种方式可以在 element 后面直接使用，并且返回的也是直接number类型的数值,后面不带px。并且可以支持到IE4
console.log(`getBoundingClientRect: ${dom.getBoundingClientRect().width} + ${dom.getBoundingClientRect().height}`);
一般来说，JavaScript 获取元素宽高后，会进行操作修改，这里就会涉及到重排和重绘了，一般为了性能考虑，获取和改变元素大小的操作最好不要太频繁。
注意： 这里使用getBoundingClientRect和getComputedStyle也会导致重排。
本文文字及图片出自 InfoQ
你也许感兴趣的：
- ECMAScript 2024新特性
- 【外评】JavaScript 变得很好
- 一长串（高级）JavaScript 问题及其解释
- 不存在的浏览器安全漏洞：PDF 中的 JavaScript
- Python 里的所有双下划线(dunder)方法、函数和属性
- 【程序员搞笑图片】JavaScript
- JavaScript 膨胀于 2024 年
- 解码为什么 JS 中的 0.6 + 0.3 = 0.89999999999999 以及如何解决？
- 用 JavaScript 实现的 17 个改变世界的方程式
- 【译文】Dropbox：我们如何将 JavaScript 打包程序的大小减少 33% 的
你对本文的反应是：