获取dom元素的样式 style defaultView.getComputedStyle

当你想要获取某一dom元素的css样式时，直接想到的就是获取其style属性

document.getElementById('div').style

但是实际上并不如你所愿，style属性里的各个值大部分都是空的。因为往往样式都是通过css生成的。

Jquery里有.css('color')的方法，它其实就是通过原生的 getComputedStyle 来实现的。

以下是实现方式：

function getStyle(element, styleName) {
  if (!element || !styleName) return false;
  if (styleName === 'float') styleName = 'cssFloat';

  try {
    const computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};

getComputedStyle的第一个参数是dom对象，第二个是伪类选择器。

如 window.getComputedStyle(element, "::after")