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

然后您可以更改body元素的 css 类，页面上的所有元素都将继承新样式。

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

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

jQuery代码：

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

score 1 · Accepted Answer

一键更改主题的最佳方法是为您的身体标签提供一些类别。

然后在你的CSS中：

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

你可以在jquery中为点击事件绑定改变它

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

score 0 · Accepted Answer

正确的方法是为每个要更改颜色的 html 元素分配一个 css 类。

HTML：

<div class="colorChange">

CSS：

.colorChange{ color:#111;}

然后你会有一个触发 javascript 函数的按钮，它会改变 colorChange 类的颜色属性，我建议使用jQuery：

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

score 0 · Accepted Answer

如果您可以在课程之间切换，我认为会更好；如果你不能/不想你可以使用.filterjQuery 中的函数：

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

这会将yourselector使用 color选择的所有元素更改rgb(0, 1, 17)为 color rgb(0, 2, 34)。

显然你也可以对其他 css 属性做同样的事情。

4 回答 4