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

親ノードに対しても同様に行う必要があります。完全な例については、Firefox でのインスペクター機能の実装を見ることができます(私の回答の関数は恥知らずにここisPageStyleから「借用」されています)。

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

matchesSelectorwebkitMatchesSelector、mozMatchesSelector、oMatchesSelectorさらにはmsMatchesSelector(IE9+)などの名前空間関数を実際にサポートしているブラウザーでは、実際にはサポートされていない要素メソッドです。document.querySelectorAll(r.selectorText)悲しいことに、IE8 ではそれをエミュレートする必要があり、大きな DOM ツリーでは非常に遅くなる可能性がある要素が に含まれているかどうかを確認するよりも良い方法は見つかりませんでした。

この最後のケースでは、明らかにrulesの代わりにを使用する必要がありcssRulesます。

于 2012-05-21T22:40:54.660 に答える