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也会导致重排。