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によって参照された彼らのコメントの中で。