Puis-je modifier dynamiquement les règles de classe CSS avec jQuery ?

Comment modifier dynamiquement les règles de classe CSS avec jQuery

Question :

• Comment puis-je modifier un CSS spécifique règles pour une classe utilisant jQuery, sans ajouter de styles en ligne ?
• Est-il possible d'enregistrer ces modifications de manière persistante dans un fichier ?

Réponse :

Bien que jQuery ne fournisse pas directement de méthode pour modifier les règles CSS, il existe deux approches pour accomplir vos tâches :

a. Modification des règles CSS à la volée :

• À l'aide de la propriété document.styleSheets de JavaScript, vous pouvez accéder aux règles de la feuille de style.
• Parcourez les règles et localisez la règle associée à votre classe cible.
• Utilisez la propriété Rules[j].style pour modifier la propriété CSS souhaitée, telle que "font-size".
• Exemple :

<code class="javascript">var ss = document.styleSheets;

for (var i = 0; i < ss.length; i++) {
    var rules = ss[i].cssRules || ss[i].rules;

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

b. Enregistrement des modifications de style dans un fichier :

• Ce processus nécessite une implémentation côté serveur.
• Lisez les déclarations CSS modifiées à l'aide de la propriété document.styleSheets comme expliqué ci-dessus.
• Utilisez JavaScript pour créer une chaîne contenant le CSS mis à jour.
• Envoyez une requête Ajax POST au serveur avec la chaîne CSS comme charge utile.
• Côté serveur, enregistrez le CSS modifié en fichier pour un stockage permanent.

Références :

• [document.styleSheets (Mozilla)](https://developer. mozilla.org/en-US/docs/Web/API/Document/styleSheets)
• [Objet CssRule (Mozilla)](https://developer.mozilla.org/en-US/docs/Web/ API/CSSRule)
• [document.styleSheets (MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330629(v=vs.85))
• [Objet CssRule (MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330627(v=vs.85))

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!