Question

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

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

我想在jquery中更改myBox和myBox2中的“color”属性集，而不知道css样式的实际名称（myBox，myBox2）。换句话说，我想在页面上更新颜色=特定值的所有CSS样式，然后还更新边界= =某个值。

示例（无效代码）可能是：

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

使用jquery怎么可能呢？

Answer 1

也许您应该考虑重构HTML + CSS。 CSS的全部意义在于通过您的网站“级联”样式。因此，宣布这样的东西会非常有意义：

body {color:#333;}

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

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

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

的URL

/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”选择器，而是使用您想要更改的特定选择器在其后代元素中生效。遍历所有主体元素并为每个主体元素运行过滤器功能对于大页面而言性能很重，因此如果可以和/或将选择器放在“查找”中，则使用更具体的选择器更改“主体”，例如： $（“＃my_content”）。find（“p”）。filter（function（）{...

注意：返回值：$（this）.css（“color”）是rgb格式，所以使用rgb格式来定义要在上面的过滤函数中修改的颜色

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

3 个答案: