☰

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

tag-icon • tag-icon jquery css ajax class properties
jQueryでCSSクラスのプロパティを変更する 質問する

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

これは実際の例です:

クラス付きのdivがありますred

.red {background: red;}

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

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

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

これは、現在クラスを持つ要素に影響しますred。ここまではすべて問題ありません。ただし、Ajax 呼び出しを行い、redクラスを持つ div をさらに挿入すると、それらの背景は緑色ではなく、初期の背景になりますred。

jQueryを呼び出すことができます.css() メソッドもう一度。しかし、クラス自体を変更する方法があるかどうかを知りたいです。これは単なる基本的な例であることを考慮してください。

ベストアンサー1

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);
    }
}

上記の例は以下からコピーしたものです:

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

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

サンプルコードは以下からコピーしたものですこのJSFiddleフィドル元々はAlvaroによって参照された彼らのコメントの中で。

おすすめ記事