使用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}