jQuery を使用して CSS クラス ルールを動的に変更できますか?

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

質問:

• 特定の CSS を変更するにはどうすればよいですかインライン スタイルを追加せずに jQuery を使用するクラスのルール?
• ですか?これらの変更をファイルに保存することはできますか?

答え:

jQuery は CSS ルールを変更する方法を直接提供しませんが、2 つの方法があります。タスクを達成するためのアプローチ:

a. CSS ルールをオンザフライで変更する:

• JavaScript の document.styleSheets プロパティを使用すると、スタイルシート ルールにアクセスできます。
• ルールを反復処理し、スタイルシート ルールに関連付けられたルールを見つけます。 target class.
• rules[j].style プロパティを使用して、次のような目的の CSS プロパティを変更します。 "font-size".
• 例:

<code class="javascript">var ss = document.styleSheets;

for (var i = 0; i < ss.length; i++) {
    var rules = ss[i].cssRules || ss[i].rules;

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

b.スタイルの変更をファイルに保存:

• このプロセスにはサーバー側の実装が必要です。
• 上で説明したように、document.styleSheets プロパティを使用して、変更された CSS 宣言を読み取ります。
• JavaScript を使用して、更新された CSS を含む文字列を構築します。
• Ajax POST リクエストを送信します。 CSS 文字列をペイロードとしてサーバーに送信します。
• サーバー側で、変更した CSS を永続的に保存するファイルに保存します。

参照:

• [document.styleSheets (Mozilla)](https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets)
• [CssRule オブジェクト (Mozilla)](https://developer.mozilla .org/en-US/docs/Web/API/CSSRule)
• [document.styleSheets (MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330629(v=vs.85))
• [CssRule オブジェクト(MSDN)](https://docs.microsoft.com/en-us/previous-versions/ie8/cc330627(v=vs.85))

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