如何使用 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/Sheets (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中文網其他相關文章！