通过Jquery使用属性更改所有CSS样式

Question

在一个页面上我包含了一些css，例如：

<style type='test/css'>
.myBox{
color:#000000;
border:#FFFFFF;
padding:4px;
}
.myBox2{
color:#000000;
border:#FFFFFF;
padding:4px;
}
</style>

然后，我想在不知道myBox样式的实际名称(myBox、myBox2)的情况下，更改在jquery的css和css中设置的“颜色”属性。换句话说，我希望更新页面上color =某个值的所有css样式，然后还更新边框where =某个值。

一个示例(无效代码)可能是：

$("all css [color:#000000]").html("#FF0000");

使用jquery怎么可能做到这一点？

Answer 1

也许你应该考虑重构你的HTML + CSS。CSS的全部意义就是在你的站点中“层叠”样式。因此，声明如下内容将是非常有意义的：

body {color:#333;}

上面的CSS属性在站点上的所有元素中都被继承。当需要切换样式时，您可以用自己的样式覆盖上面的样式：

$("body").css("color", "purple");

或者，也许你想看看样式表切换器，这给你更细粒度的控制你的CSS (example)，这些样式表可以在运行时生成，使用服务器端编程语言(例如PHP)，使用类似于：

/css/generate-css.php?color=purple

Answer 2

我不确定这是否适用于您，因为这是一种完全不同的方法。

不使用颜色css，而是使用该类来定位元素，并添加一个包含颜色css的新类。

例如

css

.color1 {color:#000000;}
.color2 {color:#FFFFFF;}
.color3 {color:#FF00FF;}

如果您可以完全控制html，只需在.mybox类之外添加颜色类即可。如果不能这样做，可以使用$(".mybox").addClass("color1")；

css类也可以动态改变，但是我没有一个好的例子让javascript做到这一点。

如果可以，这可能是一个比根据颜色属性查找项目更好的解决方案。如果你想交换颜色，就说mybox是红色的，mybox2是蓝色的。要交换颜色，您需要将一种颜色临时设置为唯一颜色。否则，当您将所有红色项设置为蓝色时，mybox和mybox2都将变为蓝色，而将所有蓝色项设置为红色会将mybox更改回红色，而mybox2将变为红色。希望这能有所帮助。

Answer 3

$(document).ready(function () {

    $("body").find("*").filter(function() {
        return ( $(this).css("color") == "rgb(0, 0, 0)" );
    }).css("color", "red");

});

为了获得更好的性能，不要像上面的代码那样使用"body“选择器，而是使用您希望更改在其后代元素中生效的特定选择器。遍历所有主体元素并为每个主体元素运行筛选函数对于大页面来说性能很高，所以如果可以的话，使用更具体的选择器来更改" body“，和/或在"find”中放置一个选择器，例如：$("#my_content").find("p").filter( function () { ...

注意：$(this).css(" color ")的返回值是rgb格式，请在上面的filter函数中使用rgb格式定义需要修改的颜色。