Comment puis-je modifier la taille de police d'une règle de classe CSS à l'aide de jQuery sans affecter les autres styles de la même classe ?

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

Question :

Vous souhaitez ajuster les règles de classe CSS à la volée à l'aide de jQuery, en modifiant spécifiquement la taille de la police sans affecter les autres styles au sein d’une classe fournie (.classname). De plus, vous recherchez une méthode pour stocker les modifications de classe mises à jour dans un fichier.

Réponse :

Modifier les règles de classe CSS avec jQuery

Malheureusement, jQuery lui-même ne dispose pas d'un support natif pour modifier directement les classes CSS. Cependant, voici une approche alternative utilisant JavaScript :

<code class="javascript">// Select the CSS rule for the target class (`classname`)
const rule = document.styleSheets[0].cssRules[0];

// Adjust font size specifically
rule.style.fontSize = "16px";</code>

Enregistrement des modifications de classe CSS dans un fichier

Pour enregistrer les règles CSS modifiées dans un fichier, suivez ces étapes :

1. Scrape les déclarations CSS à l'aide du script suivant :

   <code class="javascript">// Function to extract CSS declarations from a rule
   function getDeclarations(rule) {
     let declarations = [];
     for (let i = 0; i < rule.cssText.length; i++) {
    declarations.push(rule.cssText[i].trim());
     }
     return declarations;
   }
   
   // Save declarations to a variable
   const declarations = getDeclarations(rule);</code>

2. Construis une chaîne CSS à partir des déclarations collectées :

   <code class="javascript">// Create a CSS string
   const cssString = declarations.join(";\n");</code>

3. Lancez une requête Ajax POST pour enregistrer la chaîne CSS dans un fichier côté serveur.

Remarques supplémentaires :

• La solution JavaScript fournie est prise en charge dans les principaux navigateurs, y compris Internet Explorer 6.
• Le processus d'enregistrement des fichiers nécessite une gestion côté serveur, qui n'est pas abordée ici.
• Envisagez d'utiliser un CSS préprocesseur (par exemple, Less, Sass) pour une manipulation plus facile des variables 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!