檢測樣式是否是用戶樣式

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（isPageStyle函數在我的答案中無恥地從here「借來」）。

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，甚至msMatchesSelector（IE9 +）。不幸的是，對於IE8，你必須模擬它，並且我無法找到比檢查元素是否包含在document.querySelectorAll(r.selectorText)中更好的東西，這對於大型DOM樹來說可能非常緩慢。

在這最後一種情況下，您顯然必須使用rules而不是cssRules。