jQueryでCSSのクラスプロパティを変更する

質問

jQueryを使って、要素のプロパティではなく、CSSクラスのプロパティを変更する方法はありますか？

これは実用的な例です。

divにクラス red

.red {background: red;}

クラスを変更したい red を持つ要素ではなく、背景のプロパティを変更したい。 red を持つ要素ではなく、背景が割り当てられます。

jQueryでやると .css()メソッド :

$('.red').css('background','green');

というクラスを持っている要素に影響します。 red . ここまではすべてうまくいっています。 しかし、もし私が Ajax 呼び出しを行い、さらに red クラスを持つ div をさらに挿入すると、それらの div は緑色の背景を持たず、初期状態である red の背景になります。

jQueryを呼び出すことができる .css()メソッド を再び呼び出すことができます。しかし、私はクラス自体を変更する方法がある場合、私は知っていただきたいと思います。これはあくまで基本的な例だとお考えください。

どのように解決するのですか？

jQueryでCSSプロパティを直接変更することはできません。しかし、少なくとも2つの方法で同じ効果を得ることができます。

ファイルからCSSを動的に読み込む

function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");

        css.attr({
          id: "dynamic_css",
          rel:  "stylesheet",
          type: "text/css",
          href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href",newstylesheet);
    }
}

上の例はコピーしたものです。

• jQueryを使用してCSSファイルをオンザフライで切り替える方法

スタイル要素を動的に追加する

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

サンプルコードは このJSFiddleのフィドル 元々は Alvaro が参照した というコメントで .