CSSOM を使用して JavaScript で CSS を効率的に解析するにはどうすればよいですか?

JavaScript / jQuery での CSS の解析

JavaScript で CSS を解析するには、ブラウザーの組み込み CSSOM インターフェイスを利用できます。これにより、カスタム ライブラリの必要性がなくなり、CSS データにアクセスするための標準化された方法が提供されます。

CSSOM から直接 CSS ルールを取得するための JavaScript:

var rulesForCssText = function (styleContent) {
    var doc = document.implementation.createHTMLDocument(""),
        styleElement = document.createElement("style");

    styleElement.textContent = styleContent;
    // the style will only be parsed once it is added to a document
    doc.body.appendChild(styleElement);

    return styleElement.sheet.cssRules;
};

rulesForCssText によって返される各 CSS ルールは、個々の CSS プロパティへのアクセスを提供する、rule.style を使用してさらに検査することができます。

たとえば、 CSS:

a {
  color: red;
}

rulesForCssText を使用すると、「a」スタイルのルールを取得し、そのプロパティにアクセスできます:

const rules = rulesForCssText('a { color: red; }');
const aRule = rules[0];
console.log(aRule.selectorText); // Outputs: "a"
console.log(aRule.style.color); // Outputs: "red"

この代替アプローチは、カスタム解析で直面する問題を解決します。手動の文字列分割やプロパティ値の URI などの特殊なケースの処理に依存しないため、実装されています。

以上がCSSOM を使用して JavaScript で CSS を効率的に解析するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。