How can I modify a CSS class rule\'s font size using jQuery without affecting other styles in the same class?

How to Modify CSS Class Rules Dynamically with jQuery

Question:

You want to adjust CSS class rules on the fly using jQuery, specifically modifying the font size without impacting other styles within a provided class (.classname). Additionally, you seek a method to store the updated class changes in a file.

Answer:

Modifying CSS Class Rules with jQuery

Unfortunately, jQuery itself lacks native support for directly modifying CSS classes. However, here's an alternative approach using 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>

Saving CSS Class Changes to a File

To save the modified CSS rules to a file, follow these steps:

1. Scrape the CSS declarations using the following script:

   <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. Construct a CSS string from the collected declarations:

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

3. Initiate an Ajax POST request to save the CSS string to a server-side file.

Additional Notes:

• The provided JavaScript solution is supported in major browsers, including Internet Explorer 6.
• The file-saving process requires server-side handling, which is not covered here.
• Consider using a CSS preprocessor (e.g., Less, Sass) for easier manipulation of CSS variables.

The above is the detailed content of How can I modify a CSS class rule\'s font size using jQuery without affecting other styles in the same class?. For more information, please follow other related articles on the PHP Chinese website!