我正在尝试使用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?
答案 0 :(得分:4)
您可以使用jQuery在点击事件中向正文添加或删除特定类吗?然后在样式表中,根据.theme
类是否存在来定义新颜色。
这只是一个例子:
$(".btn").click(function(){
$("body").toggleClass( "theme" );
});
然后在你的样式表中设置如下:
* {color:red;background:yellow;border-color:blue}
.theme * {color:green;background:pink;border-color:orange}