javascript - window.getComputedStyle() : How to Discard properties with default values?

Question

嗨 我正在为 Google Chrome 开发一个扩展，并使用 window.getComputedStyle() 来获取 DOM 元素的特定属性。通过这种方式，我获得了多个属性并构建了一个 CSS。我想丢弃具有默认值的属性。我怎样才能做到这一点？我如何知道属性的默认值？

Answer 1

查看 Chrome 资源让我发现: node.ownerDocument.defaultView.getMatchedCSSRules(node, '');

我用它来创建这个函数，它将只返回由 style 属性或匹配的 CSS 规则定义的样式。 getComputedStyle 中出现但此处未出现的任何内容都是默认值，但我猜这会返回您实际要查找的内容:没有默认值的样式。

// WebKit only
function getStyle(node) {
  var styles = {};
  var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, '');

  var i = rules.length;
  while (i--) {
    merge(styles, rules[i].style)
  }
  merge(styles, node.style);

  return styles;

  function merge(obj, style) {
    var i = style.length;
    while(i--) {
      var name = style[i];
      obj[name] = style.getPropertyCSSValue(name);
    }
  }
}