javascript - jqueryですべての色を変更するにはどうすればよいですか?

Question

jQueryを使用して、htmlファイル内のすべての#111色(例の色)を(新しい色)に置き換えたいです。#222ワンクリックでウェブサイトのテーマを変更するには、これを行いたいです。

初期CSS:

body{
    bg-color:#111;
    color:#111;
}
div1{
    bg-color:#111;
    color:#111;
}
.
.
.
divn{
    bg-color:#111;
    color:#111;
}

クリックイベント後：

body{
    bg-color:#222;
    color:#222;
}
div1{
    bg-color:#222;
    color:#222;
}
.
.
.
divn{
    bg-color:#222;
    color:#222;
}

score 6 · Accepted Answer

ここでの最善の解決策は、ネストされた要素にカスケードされたスタイルを持つ 2 つの css クラスを定義することです。

body { color:#111 }
.theme1 { color: #222; }
.theme2 { color: #333; }
.theme2 a { color: #003366; }
...

次に、要素の css クラスを変更するbodyと、ページ上のすべての要素が新しいスタイルを継承します。

// theme1 color
<body class="theme1">
...
</body>

// theme2 color
<body class="theme2">
...
</body>

jqueryコード:

$('body').addClass('theme1');

score 1 · Accepted Answer

ワンクリックでテーマを変更する最善の方法は、body タグに何らかのクラスを与えることです。

次に、CSSで：

body{ color: #111;}
body.secondTheme{color : #222; }

そして、jqueryのクリックイベントにバインドして変更できます

$("#yourButton").click(function() {
    $("body").toggleClass("secondTheme");
});

score 0 · Accepted Answer

クラスを切り替えることができれば、もっと良いと思います。できない/望まない場合は.filter、jQueryの関数を使用できます。

$('yourselector').filter(function(){
    return $(this).css('color')=='rgb(0, 1, 17)';
}).css('color','rgb(0, 2, 34)');

これにより、withcolorで選択されたすべての要素yourselectorがcolorrgb(0, 1, 17)に変更されますrgb(0, 2, 34)。

もちろん、他のcss属性でも同じことができます。

score 0 · Accepted Answer

これを行う適切な方法は、色を変更するすべての html 要素に css クラスを割り当てることです。

HTML:

<div class="colorChange">

CSS:

.colorChange{ color:#111;}

次に、colorChange クラスの色属性を変更する JavaScript 関数をトリガーするボタンが表示されます。jQuery を使用することをお勧めします。

$(".colorChange").css('color', '#222');

4 に答える 4