Wie kann ich CSS in JavaScript mithilfe des CSSOM effizient analysieren?

CSS in JavaScript / jQuery analysieren

Um CSS in JavaScript zu analysieren, können Sie die integrierte CSSOM-Schnittstelle des Browsers nutzen. Dies macht benutzerdefinierte Bibliotheken überflüssig und bietet eine standardisierte Möglichkeit, auf CSS-Daten zuzugreifen.

JavaScript zum Abrufen der CSS-Regeln direkt aus CSSOM:

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

Jede von RulesForCssText zurückgegebene CSS-Regel kann kann mithilfe von „rule.style“ weiter überprüft werden, das Zugriff auf einzelne CSS-Eigenschaften bietet.

Bedenken Sie beispielsweise die CSS:

a {
  color: red;
}

Mit RulesForCssText können Sie die Regel für den „a“-Stil abrufen und auf seine Eigenschaften zugreifen:

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

Dieser alternative Ansatz behebt das Problem, das bei Ihrer benutzerdefinierten Analyse auftritt Implementierung, da sie nicht auf die manuelle Aufteilung von Zeichenfolgen und die Behandlung von Sonderfällen wie URIs in Eigenschaftswerten angewiesen ist.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS in JavaScript mithilfe des CSSOM effizient analysieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!