Question

我无法弄清楚如何更改CSS类中的属性。现在我向该特定div添加一个样式，但我想要的是改变CSS类中的属性，而不是仅仅被新样式属性覆盖。

一个例子：

.example{background-color:blue}

<div class="example">example</div>

那么我怎样才能改变.example CSS中的背景颜色，而不仅仅是像这样覆盖它：

<div class="example" style="background-color:blue">example</div>

我尝试了很多东西，但我无法弄明白。我试过了.attr()和.css()，但我错过了一些东西。

Answer 1

你不能改变班级的实际CSS（你可以，但这非常困难并且不能练习） - 但是你可以为现在应用于该班级的所有内容改变它：

$('.example').css('background-color', 'blue');

然而，无论何时生成类型的新元素，您都可以重新应用CSS。例如，在调用从另一个文件中检索数据的AJAX脚本之后：

$('#blah').load('script.php', function() {
    $('.example').css('background-color', 'blue');
});

你也可以为所有元素重新应用一个区间，但是性能明智的是不推荐：

setInterval(function() {
    $('.example').css('background-color', 'blue');
}, 100);

我的建议是找到另一种标记更改的方法，比如第二个类，并使用该类对元素进行更改。

Answer 2

你想要什么是不可能的，但这样的事情可能会更好。

body.blueTheme .example { background-color: blue; }
body.redTheme .example { background-color: red; }

现在，不要更改事件处理程序中的颜色，而是更改正文的类。

Answer 3

动态更改样式表通常是个坏主意，除非您打算实施完整的重新定位。

通常最好找一些标记元素的方法，以便它们获得不同的样式，但如果你必须这样做，你可以动态地改变加载的样式表。

将id放在链接到外部CSS文件的<style>元素上：

<link id="dynCss" rel="stylesheet" type="text/css" href="..." />

然后将两种不同的样式变体放在两个不同的CSS文件中。

然后你可以使用：

document.getElementById('dynCss').href = ...

或

$('#dynCss).attr('href', ...);

然后将在新网址中加载（并应用）新样式。