通过css / javascript更改指定的样式？

Question

我知道这是一个老问题，类似的问题（已解决）甚至更复杂。但我已经尝试过，也无法自己解决这个问题。

我有

<div style="color:white; padding:10px">Text</div>

我想将其颜色更改为红色：

div[style*="color:white"]{color:red}

$('div').filter(function() {
    return $(this).css('color') == 'white';
}).css("color", "red");

我尝试使用css和javascript，无论是否使用空格，都使用十六进制或RGB颜色代码。

Answer 1

问题在于它没有返回你期望的东西。它实际上返回的是RGB字符串rgb(255, 255, 255)，而不是“白色”。改变这一点，你就是金色的。

Example JSFiddle

Answer 2

实际上$(this).css('color')会返回rgb(255, 255, 255)，因此您可以使用

$('div').filter(function() {
    return $(this).css('color') == 'rgb(255, 255, 255)';
}).css("color", "red");

Example.

Answer 3

在.css（）的JQuery API文档中，编写了以下句子。

“不同的浏览器可能会返回逻辑上但文本上不相同的CSS颜色值，例如#FFF，＃fffff和rgb（255,255,255）。”

所以，我认为简单的return $(this).css('color') == 'rgb(255, 255, 255)';在未来也可能存在一些问题。

在这里我建议使用css类来实现它如下：

.white{color:white;}
.red{color:red;}

$('div').filter(function() {
    return $(this).hasClass('white');
}).removeClass('white').addClass('red');

为什么div[style*="color:white"]{color:red}不起作用，这是因为内联css在三种方式中具有最高优先级。

Answer 4

你正在做一些非常时髦的事情，不应该像这样使用过滤功能。要选择dom元素并使用jquery更改其css，请执行以下$('div').css({'color': 'red'});

这是一个有效的example

为了正确介绍jquery，我建议amazing Chris Coyer

推荐这个视频

Answer 5

内联CSS接管任何内部或外部样式表。如果您能够删除该特定元素上的内联css，并将其替换为理想的<div class="myElememt"></div>之类的内容。至于使用jQuery，我通过使用没有过滤器的CSS方法来改变它：

$('div').css('color', 'blue');