获取dom的最终的css属性值

需求

我们有的时候需要测试看一下属性是否设置成功，所以需要通过dom去获取css样式。但是，如果使用原生去获取的话，会发现只有在dom身上设置的才能够获取的到，如dom.style.width，只有直接写到标签上，才能够获取的到，而在别的地方的我们将获取不到，今天我们就研究一下，直接获取写在style标签的css属性。就像jq的css()方法一样

getComputedStyle方法

我们可以通过getComputedStyle方法去获取一个dom最终的属性样式，不管在什么地方定义的。

语法

let style = window.getComputedStyle(element, [pseudoElt]);

• element
  用于获取计算样式的Element
• pseudoElt 可选
  指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。
• 返回的结果
  返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。

封装方法

我们可以将这个封装一个简单的方法使用，每次获取的时候调用一下方法就行了

function getTheStyle(dom,style){
    return window.getComputedStyle(dom, null)[style];
}

• dom
  一个dom对象，获取样式的目标dom
• style
  需要获取的dom对象的属性的值
• 返回
  返回当前相关需要获取的值