Question

在调用window.getComputedStyle之后，如何判断样式是来自页面本身（而不是来自浏览器）？我有兴趣在纯JavaScript中这样做，但我会满足于在附加组件环境中运行的解决方案。

Answer 1

您将很难确定getComputedStyle给您的规则来自哪里。请注意，MaxArt提供的代码不是一个完整的解决方案 - 还有继承的样式，因此必须为父节点重复所有内容。更简单的方法是使用inIDOMUtils.getCSSStyleRules()，沿着这些方向：

function isPageStyle(styleSheet)
{
  if (styleSheet.ownerNode)
    return true;

  if (styleSheet.ownerRule instanceof Components.interfaces.nsIDOMCSSImportRule)
    return isPageStyle(styleSheet.parentStyleSheet);

  return false;
}

var domUtils = Components.classes["@mozilla.org/inspector/dom-utils;1"]
                         .getService(Components.interfaces.inIDOMUtils);
var rules = domUtils.getCSSStyleRules(element);
for (var i = 0; i < rules.Count(); i++)
{
  var rule = rules.GetElementAt(i);
  if (isPageStyle(rule.parentStyleSheet))
    alert(rule.cssText);
}

您也必须为父节点执行此操作。有关完整示例，您可以在implementation of the Inspector feature in Firefox中无耻地“借用”我的答案中查看here（isPageStyle函数。）

Answer 2

除非你想解析文档中的每个样式表，否则你不能。如果您的样式存在问题，默认情况下每个浏览器都应用于元素，您可以依赖重置CSS。

如果你想解析样式表，无论如何，你可以这样做：

function isDefaultStyle(element, property) {
    if (element.style[property]) return false;
    for (var i = 0; i < document.styleSheets.length; i++) {
        for (var j = 0, r; j < document.styleSheets[i].cssRules.length; j++) {
            r = document.styleSheets[i].cssRules[j];
            if (element.matchesSelector(r.selectorText) && r[property]) return false;
        }
    }
    return true;
}

matchesSelector是任何浏览器实际上都不支持的元素方法，它实际上支持webkitMatchesSelector，mozMatchesSelector，oMatchesSelector甚至{{1}等命名空间函数（IE9 +）。遗憾的是，对于IE8，你必须模仿它，我找不到比检查元素是否包含在msMatchesSelector中更好的东西，这对于大型DOM树来说可能非常慢。

在最后一种情况下，您显然必须使用document.querySelectorAll(r.selectorText)而不是rules。

检测样式是否为用户样式

2 个答案: