Can jQuery Directly Modify CSS Class Rules?

Modifying CSS Class Rules with jQuery

Your question centers around modifying CSS class rules on the fly, a task seemingly suited for jQuery's versatility. However, it's important to note that jQuery's core functionality doesn't explicitly provide a means to manipulate CSS class rules directly.

Changing Font Size Only within a Class

Despite the limitations, you can achieve your first goal using JavaScript's native styleSheets property. Here's a proof of concept:

<code class="javascript">// Iterate over style sheets
for (let i = 0; i < document.styleSheets.length; i++) {
    const rules = document.styleSheets[i].cssRules || document.styleSheets[i].rules;

    // Search for the target class selector
    for (let j = 0; j < rules.length; j++) {
        if (rules[j].selectorText === ".classname") {
            // Update the font size property only
            rules[j].style.fontSize = "16px";
        }
    }
}</code>

Saving Modified Styles

For your second question, while jQuery doesn't provide a straightforward method for saving CSS modifications, you can explore the following approach:

• Parse the CSS stylesheet and extract the modified rules using JavaScript.
• Create a string representation of the modified CSS declarations.
• Send the string to the server using AJAX for storage or further processing.

This approach requires additional server-side implementation, but it provides a possible solution to your requirement. Refer to the provided references for further insights:

• [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/windows/internet-explorer/ie-developer/platform-apis/ms531194(v=vs.85))
• [CssRule object (MSDN)](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms531192(v=vs.85))

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