获取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 {
    var 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")

猜你喜欢

转载自blog.csdn.net/qq_33619285/article/details/80155625
今日推荐