我如何改变所有的颜色与jquery
How can i change all color with jquery?
我想用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属性做同样的事情。
相关文章:
- 如何使用jquery更改html中的背景颜色
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- jQuery动画-边框宽度和颜色
- 如何动态创建许多Jquery颜色选择器(eyecon)
- 如何用jquery动画改变背景颜色,就像一个过渡
- 使用jquery交换并保存背景颜色
- 使用jquery更改文本颜色和大小
- Jquery加载页面时的颜色更改效果
- jQuery mobile-动态更改ui页面背景颜色
- 如何在使用jquery点击文本时更改文本的颜色
- 点击时的背景颜色 - jQuery
- 使用 jQuery 单击链接时更改链接背景颜色
- 当 td id 已知时,在 jquery 中设置 td 背景颜色
- 我需要在javascript if语句中使用jquery来动画元素的颜色
- 使用 jQuery/JavaScript 在 JSF 中更改选定行的背景颜色
- 悬停时更改表格行的颜色(jQuery或CSS)
- 动画文本颜色jQuery CSS悬停消失
- 使用颜色jquery或任何其他方法保存颜色
- 更改行颜色 jQuery
- 检查颜色CSS文件..改变颜色jquery插件