javascript - 通过 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颜色代码。

score 3 · Accepted Answer

问题是它没有返回您所期望的。它实际上返回一个 RGB 字符串rgb(255, 255, 255)，而不是“白色”。改变它，你就是金子。

score 2 · Accepted Answer

实际上$(this).css('color')返回rgb(255, 255, 255)，所以你可以使用

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

score 1 · Accepted Answer

在 .css() 的 JQuery API 文档中，写了以下语句。

“不同的浏览器可能会返回逻辑上但文本上不相等的 CSS 颜色值，例如 #FFF、#ffffff 和 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}不起作用，这是因为 inline css 在三种方式中具有最高优先级。

score 0 · Accepted Answer

你在那里做了一些非常时髦的事情，不应该那样使用过滤器功能。要选择一个 dom 元素并使用 jquery 更改其 css，请执行此操作$('div').css({'color': 'red'});

这是一个工作示例

对于 jquery 的正确介绍，我推荐了惊人的 Chris Coyer的这个视频

score 0 · Accepted Answer

内联 CSS 接管任何内部或外部样式表。如果您能够删除该特定元素上的内联 css 并用类似的东西替换它，<div class="myElememt"></div>那将是理想的。至于使用 jQuery，我通过使用不带过滤器的 CSS 方法对其进行了更改：

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

5 回答 5