Question

您好我正在为Google Chrome开发扩展程序，并使用window.getComputedStyle（）来获取DOM元素的特定属性。这样，我获得了多个属性并构建了一个CSS。我想丢弃具有默认值的属性。我怎样才能做到这一点？我怎么知道属性的默认值？

Answer 1

查看铬源使我： 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);
    }
  }
}

Answer 2

这可能非常非常艰难，因为没有单一的方法来判断元素的CSS规则来自何处。 computedStyle将它们混合在一起以显示最终结果。根据定义，默认值很难从中挑选出来。

我有另一种想法 - 如果适用于您的情况：

以编程方式禁用页面中涉及的每个样式表一秒钟。禁用DOM中的所有内联<style>元素。
如果在禁用所有样式表后，元素的computedStyle保持不变，则表示您正在处理默认值。

您甚至可以找出哪些样式表包含适用于元素的规则，方法是逐个禁用样式表，并跟踪computedStyle是否发生更改。

这显然相当复杂和缓慢，但这是我能想到的唯一安全方式。

window.getComputedStyle（）：如何使用默认值丢弃属性？

2 个答案: