jQuery を使用して CSS クラス ルールを動的に変更する

クエリには 2 つの側面が含まれます。

1.クラス ルールをリアルタイムで変更する

jQuery だけでは CSS クラス ルールを動的に変更できません。ただし、ドキュメント オブジェクトの styleSheets プロパティを利用して、CSS ルールに直接アクセスできます。

Code:

document.getElementById("button").onclick = function() {
    var ss = document.styleSheets;

    for (var i = 0; i 
2.クラスの変更をファイルに保存
クラスの変更をファイルに保存するには、CSS ルールを抽出し、Ajax リクエスト経由でサーバーに送信する必要があります。サーバー側の実装には、変更されたルールを使用したファイルの作成または更新が含まれます。
追加メモ:
IE6 との互換性を確保するには、代わりに document.styleSheets を使用してください。 document.styleSheets.
CSS ルールを取得するには、スタイルシート オブジェクトの rules プロパティにアクセスします。
CSS ルールを設定または変更するには、cssText プロパティを使用します。
 ]参考文献:
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