jQuery を使用して CSS クラス ルールをリアルタイムで動的に変更するにはどうすればよいですか?

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

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

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 プロパティにアクセスします。
• 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

以上がjQuery を使用して CSS クラス ルールをリアルタイムで動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。