5

CSS クラスの属性を変更する方法がわかりません。現在、その特定の div にスタイルを追加していますが、新しいスタイル属性によって上書きされるだけでなく、CSS クラスの属性を変更したいのです。

例：

.example{background-color:blue}

<div class="example">example</div>

それでは、次のようにオーバーライドするだけでなく、.example CSS の background-color を変更するにはどうすればよいでしょうか。

<div class="example" style="background-color:blue">example</div>

いろいろやってみたのですが、どうしてもわかりません。.attr()とを試し.css()ましたが、何か不足していますか?

4

3 に答える 3

4

クラスの実際の CSS を変更することはできません (もちろんできますが、それは非常に難しく、練習に反します)。しかし、そのクラスに適用されているすべてのものを変更することはできます。

$('.example').css('background-color', 'blue');

ただし、できることは、タイプの新しい要素が生成されるたびにその CSS を再適用することです。たとえば、別のファイルからデータを取得する AJAX スクリプトを呼び出した後:

$('#blah').load('script.php', function() {
    $('.example').css('background-color', 'blue');
});

すべての要素に再適用する間隔を設定することもできますが、パフォーマンス上の観点からこれはお勧めしません。

setInterval(function() {
    $('.example').css('background-color', 'blue');
}, 100);

あなたへの私のアドバイスは、2 番目のクラスなど、変更をマークする別の方法を見つけ、そのクラスを使用して要素に変更を加えることです。

于 2013-06-26T13:50:19.213 に答える
0

あなたが望むことは不可能ですが、このようなものが良いかもしれません.

body.blueTheme .example { background-color: blue; }
body.redTheme .example { background-color: red; }

イベント ハンドラーで色を変更する代わりに、本体のクラスを変更します。

于 2013-06-26T13:54:40.553 に答える
0

完全なテーマ変更を実装するつもりでない限り、スタイル シートを動的に変更することは、通常は悪い考えです。

一般的には、要素が別のスタイルを取得するように要素をマークする別の方法を見つける方がよいでしょうが、そうする必要がある場合は、どのスタイルシートをロードするかを動的に変更できます。

外部 CSS ファイルにリンクする要素に を配置idします。<style>

<link id="dynCss" rel="stylesheet" type="text/css" href="..." />

次に、スタイルの 2 つの異なるバリエーションを 2 つの異なる CSS ファイルに配置します。

そして、次を使用できます：

document.getElementById('dynCss').href = ...

また

$('#dynCss).attr('href', ...);

これにより、新しい URL に新しいスタイルがロード (および適用) されます。

于 2013-06-26T13:56:00.883 に答える