Comment puis-je modifier dynamiquement les règles de classe CSS en temps réel avec jQuery ?

Modifiez dynamiquement les règles de classe CSS avec jQuery

Votre requête implique deux aspects :

1. Modification des règles de classe en temps réel

jQuery à lui seul ne peut pas modifier les règles de classe CSS de manière dynamique. Cependant, vous pouvez utiliser la propriété styleSheets de l'objet document pour accéder directement aux règles CSS.

Code :

<code class="javascript">document.getElementById("button").onclick = function() {
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; i++) {
        var rules = ss[i].cssRules;
        for (var j = 0; j < rules.length; j++) {
            if (rules[j].selectorText === ".classname") {
                rules[j].style.fontSize = "20px";
            }
        }
    }
};</code>

2. Enregistrement des modifications de classe dans un fichier

Pour enregistrer les modifications de classe dans un fichier, vous devez extraire les règles CSS et les envoyer au serveur via une requête Ajax. L'implémentation côté serveur implique la création ou la mise à jour d'un fichier avec les règles modifiées.

Remarques supplémentaires :

• Pour la compatibilité IE6, utilisez document.styleSheets au lieu de document.styleSheets.
• Pour obtenir les règles CSS, accédez à la propriété Rules de l'objet feuille de style.
• Utilisez la propriété cssText pour définir ou modifier les règles CSS.

Références :

• document.styleSheets (Mozilla) : https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
• Objet styleSheet (Mozilla) : https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet
• Objet CssRule (Mozilla) : https://developer.mozilla .org/en-US/docs/Web/API/CSSRule
• document.styleSheets (MSDN) : https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer /ie-developer/dom/document.stylesheets
• Objet CssRule (MSDN) : https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/ dom/cssrule

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!