0

调用后window.getComputedStyle，如何判断一个样式一个样式是否来自页面本身（而不是来自浏览器）？我有兴趣在纯 javascript 中这样做，尽管我会选择在附加组件的上下文中运行的解决方案。

4

2 回答 2

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);
}

You will have to do it for the parent nodes as well. For a complete example you can look at the implementation of the Inspector feature in Firefox (isPageStyle function in my answer shamelessly "borrowed" from here).

于 2012-05-22T05:53:56.253 回答
0

除非您想解析文档中的每个样式表，否则您不能。如果你对每个浏览器默认应用到元素的样式有问题，你可以依赖重置 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甚至msMatchesSelector(IE9+)。可悲的是，对于 IE8，您必须模拟它，而我找不到比检查元素是否包含在 中更好的方法document.querySelectorAll(r.selectorText)，这对于大型 DOM 树来说可能非常慢。

在最后一种情况下，您显然还必须使用rules而不是cssRules.

于 2012-05-21T22:40:54.660 回答