Comment puis-je modifier dynamiquement les règles de classe CSS à l'aide de jQuery sans toucher au DOM ?

Modifier dynamiquement les règles de classe CSS avec jQuery

Question 1 : Modifier les règles de classe à la volée

Pour modifier la taille de la police d'une classe CSS nommée ".classname" à l'aide de jQuery, sans ajouter de CSS en ligne ni manipuler directement le DOM, suivez ces étapes :

<code class="javascript">// Get the CSS stylesheet
var styleSheet = document.styleSheets[0];

// Loop through the CSS rules within the stylesheet
for (var i = 0; i < styleSheet.cssRules.length; i++) {
    // Check if the current rule is for the ".classname" class
    if (styleSheet.cssRules[i].selectorText === ".classname") {
        // Set the new font size for the rule
        styleSheet.cssRules[i].style.fontSize = "16px";
    }
}</code>

Question 2 : Enregistrer les modifications de classe dans un fichier

Pour enregistrer le CSS modifié règles de classe dans un fichier, vous devrez créer une requête Ajax POST au serveur.

<code class="javascript">// Build a string containing the updated CSS declarations
var updatedCSS = "";
for (var i = 0; i < styleSheet.cssRules.length; i++) {
    updatedCSS += styleSheet.cssRules[i].selectorText + " {\n";
    for (var j = 0; j < styleSheet.cssRules[i].style.length; j++) {
        updatedCSS += "    " + styleSheet.cssRules[i].style[j] + ": " + styleSheet.cssRules[i].style.getPropertyValue(styleSheet.cssRules[i].style[j]) + ";\n";
    }
    updatedCSS += "}\n";
}

// Send the updated CSS to the server
$.ajax({
    type: "POST",
    url: "/save-css",
    data: { updatedCSS: updatedCSS }
});</code>

Côté serveur, créez un script pour enregistrer le CSS mis à jour reçu dans un fichier.

Notes supplémentaires

• La première approche n'affecte pas le fichier CSS externe mais modifie uniquement les règles CSS en mémoire, elle ne persistera donc pas après l'actualisation de la page.
• Pour une compatibilité entre navigateurs, pensez à utiliser un plugin jQuery qui simplifie la manipulation des règles CSS.

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!