原生 js 获取 dom 元素 css 样式的四种方法及对比

在动态操作 dom 元素时，如果我们要获取或设置一个元素的宽高、top、left 等样式时，jq 中的 .css 是常见的方法，那么在原生 js 中呢？首先想到的就是 element.style 方法，这个方法虽然可以获取也可以设置 dom 元素的样式，但也很有局限性，下面总结一下原生 js 获取 dom 元素样式的几种方法与区别~

1. HTMLElement.style

mdn 传送门

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但无法读取内嵌和外部的样式表属性。

2. Element.currentStyle

mdn 传送门

与后面要提的 window.getComputedStyle 功能相同，这里可以获取的css样式不限内联、内嵌还是外部样式表的设置

不过这是非标准属性，该方法仅限IE浏览器，且为只读属性，不推荐使用

3.Window.getComputedStyle()

mdn 传送门

可以获取内联、内嵌还是外部样式表所有的 css 样式

4.Element.getBoundingClientRect()

mdn 传送门

这个方法可能是最偏门的一种用法

用于获取某个元素相对于视窗的位置集合。返回的对象中有 top, right, bottom, left,width,height 等属性。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。