我如何改变所有的颜色与jquery

How can i change all color with jquery?

本文关键字：颜色 jquery 何改变 改变      更新时间：2023-09-26

我想用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;
}

最好的解决方案是为嵌套元素定义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');

一键改变主题的最好方法是给你的body标签添加一些类。

然后在你的css中:

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

你可以在jquery中为click事件绑定更改它

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

正确的方法是为每个你想要改变颜色的HTML元素分配一个CSS类。

HTML: 

<div class="colorChange">
CSS: 

.colorChange{ color:#111;}
然后你会有一个触发javascript函数的按钮，它会改变colorChange类的颜色属性，我建议使用jQuery: 
$(".colorChange").css('color', '#222');

如果你可以切换类，我认为它会更好;如果你不能/不想你可以使用.filter函数在jQuery:

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

这将改变yourselector选择的所有颜色为rgb(0, 1, 17)的元素的颜色为rgb(0, 2, 34)。

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

相关文章：