jquery - 使用 JQuery 更改 CSS 类中的属性

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()and .css()，但我错过了什么。

score 4 · Accepted Answer

您无法更改该类的实际 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);

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

score 0 · Accepted Answer

动态更改样式表通常不是一个好主意，除非您打算实现完全的重新主题化。

通常最好找到其他方法来标记元素，以便它们获得不同的样式，但如果必须这样做，您可以动态更改加载的样式表。

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

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

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

然后你可以使用：

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

或者

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

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

score 0 · Accepted Answer

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

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

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

3 回答 3