Can I Modify CSS Class Rules Dynamically with jQuery?

How to Change CSS Class Rules Dynamically with jQuery

Question:

• How can I modify specific CSS rules for a class using jQuery, without adding inline styles?
• Is it possible to save these changes persists in a file?

Answer:

While jQuery doesn't directly provide a method to modify CSS rules, there are two approaches to accomplish your tasks:

a. Modifying CSS Rules on the Fly:

• Using JavaScript's document.styleSheets property, you can access the stylesheet rules.
• Iterate through the rules and locate the rule associated with your target class.
• Use the rules[j].style property to change the desired CSS property, such as "font-size".
• Example:

<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. Saving Style Changes to a File:

• This process requires server-side implementation.
• Read the modified CSS declarations using the document.styleSheets property as explained above.
• Use JavaScript to build a string containing the updated CSS.
• Send an Ajax POST request to the server with the CSS string as payload.
• On the server-side, save the modified CSS to a file for permanent storage.

References:

• [document.styleSheets (Mozilla)](https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets)
• [CssRule object (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))
• [CssRule object (MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330627(v=vs.85))

The above is the detailed content of Can I Modify CSS Class Rules Dynamically with jQuery?. For more information, please follow other related articles on the PHP Chinese website!