如何使用 jQuery 实时动态更改 CSS 类规则？

使用 jQuery 动态更改 CSS 类规则

您的查询涉及两个方面：

1.实时修改类规则

仅靠 jQuery 无法动态更改 CSS 类规则。但是，您可以利用文档对象的 styleSheets 属性直接访问 CSS 规则。

代码：

<code class="javascript">document.getElementById("button").onclick = function() {
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; i++) {
        var rules = ss[i].cssRules;
        for (var j = 0; j < rules.length; j++) {
            if (rules[j].selectorText === ".classname") {
                rules[j].style.fontSize = "20px";
            }
        }
    }
};</code>

2.将类更改保存到文件

要将类更改保存到文件，您需要提取 CSS 规则并通过 Ajax 请求将它们发送到服务器。服务器端实现涉及使用修改后的规则创建或更新文件。

附加说明：

• 为了兼容 IE6，请使用 document.styleSheets 而不是document.styleSheets。
• 要获取CSS规则，请访问样式表对象的rules属性。
• 使用cssText属性设置或修改CSS规则。

参考文献：

• document.styleSheets (Mozilla)：https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
• styleSheet 对象 (Mozilla)：https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet
• CssRule 对象 (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/dom/document.stylesheets
• CssRule 对象（MSDN）：https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/ dom/cssrule

以上是如何使用 jQuery 实时动态更改 CSS 类规则？的详细内容。更多信息请关注PHP中文网其他相关文章！