Comment puis-je analyser efficacement le CSS en JavaScript à l'aide du CSSOM ?

Analyse CSS en JavaScript / jQuery

Pour analyser CSS en JavaScript, vous pouvez exploiter l'interface CSSOM intégrée du navigateur. Cela élimine le besoin de bibliothèques personnalisées et fournit un moyen standardisé d'accéder aux données CSS.

JavaScript pour récupérer les règles CSS, directement depuis 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;
};

Chaque règle CSS renvoyée par RulesForCssText peut être inspecté plus en détail à l'aide de Rule.style, qui donne accès aux propriétés CSS individuelles.

Par exemple, considérez le CSS :

a {
  color: red;
}

En utilisant RulesForCssText, vous pouvez récupérer la règle pour le style "a" et accéder à ses propriétés :

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

Cette approche alternative résout le problème rencontré dans votre analyse personnalisée. implémentation, car elle ne repose pas sur le fractionnement manuel des chaînes ni sur la gestion de cas particuliers tels que les URI dans les valeurs de propriété.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!