Maison > interface Web > tutoriel CSS > le corps du texte

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

Susan Sarandon
Libérer: 2024-11-03 10:35:02
original
339 Les gens l'ont consulté

How can I dynamically change CSS class rules in real time with 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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal