使用JS

时间:2016-02-08 01:07:53

标签: javascript css

我正在尝试使用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?

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}