javascript - 使用JS更改页面上的所有颜色

Question

我正在尝试使用 JS 为我的网站制作一个简单的颜色切换器。问题是我的网站有两种可能的样式表，这使它变得有点困难。

我目前有:

$(document).ready(function () {
$('*').filter(function() { 
    return $(this).css('background-color') == "rgb(101, 31, 255)" 
}).css('background-color', '#33b5e5')
$('*').filter(function() { 
    return $(this).css('border-color') == "rgb(101, 31, 255)" 
}).css('border-color', '#33b5e5')
$('*').filter(function() { 
    return $(this).css('color') == "rgb(101, 31, 255)" 
}).css('border-color', '#33b5e5')
});

这是丑陋而可怕的，但遍历所有可以有颜色的元素，并将其替换为另一种。问题是我必须重新运行它，不仅仅是每次页面更改，而且每次加载 div 时，这将是疯狂的。

是否有更好的方法来更改带有颜色 2 的样式表中的所有颜色 1？

Answer 1

您能否使用 jQuery 在单击事件中向正文添加或删除特定类？然后在您的样式表中，根据该 .theme 类是否存在定义一种新颜色。

这只是一个例子:

$(".btn").click(function(){
  $("body").toggleClass( "theme" );
});

然后在你的样式表中设置如下:

* {color:red;background:yellow;border-color:blue}
.theme * {color:green;background:pink;border-color:orange}