使用 JQuery 更改 CSS 类中的属性 [重复]答案

【问题标题】：Change attributes in CSS class with JQuery [duplicate]使用 JQuery 更改 CSS 类中的属性 [重复]
【发布时间】：2025-12-15 22:05:02
【问题描述】：

我不知道如何更改 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()，但我错过了什么。

【问题讨论】：

标签： jquery css

【解决方案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);

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

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

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

然后你可以使用：

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

或

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

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

【讨论】：