如何动态更改类 CSS 样式？

Question

目标

在我的程序中，我想用 jquery/javascript 做这两件事：

1. 动态更改 CSS 类的样式
2. 向元素添加/删除类

问题

首先我使用$(".className").css() 方法，但它只改变那些已经 具有className 类的元素的样式，即如果我稍后添加className 对于一个元素，它的样式不会是新的。我该如何解决这个问题？

示例

也可以通过jsfiddle查看。

$("p").addClass("redclass");
$(".redclass").css("color", "darkRed");
$("span").addClass("redclass");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I want to be red! And I am.</p>
<span>I want to be red too but I'm not :'(</span>

结果：

Answer 1

更短的格式：

$("<style/>", {text: ".redclass {color: darkRed;}"}).appendTo('head');

sn-p：

$("<style/>", {text: ".redclass {color: darkRed;}"}).appendTo('head');


$("p").addClass("redclass");

$("span").addClass("redclass");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>I want to be red! And I am.</p>
<span>I want to be red too but I'm not :'(</span>

Answer 2

虽然提供了其他（工作）答案，但它们实际上并没有回答您的问题 - 即，它们不会更改指定的 css 类，而是覆盖 稍后在文档中添加另一条规则。

他们基本上做到了这一点：

之前

.someClass
{
  color: red;
}

之后

.someClass
{
  color: red;
}

.someClass
{
  color: white;
}

在许多情况下，更好的选择是看到 现有 规则的颜色属性发生更改。

好吧，事实证明——浏览器维护着一组样式表、样式表规则和所述规则的属性。相反，我们可能更愿意找到现有规则并对其进行更改。 （与我介绍的方法相比，我们当然更喜欢一种执行错误检查的方法！）

第一个控制台消息来自#coords 规则的第一个实例。 接下来的三个来自.that 规则的三个实例

function byId(id){return document.getElementById(id)}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	byId('goBtn').addEventListener('click', onGoBtnClicked, false);
}

function onGoBtnClicked(evt)
{
	alterExistingCSSRuleAttrib('#coords', 'background-color', 'blue');
	alterExistingCSSRuleAttrib('.that', 'color', 'red');
}

// useful for HtmlCollection, NodeList, String types (array-like types)
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need

function alterExistingCSSRuleAttrib(selectorText, tgtAttribName, newValue)
{
	var styleSheets = document.styleSheets;
	forEach(styleSheets, styleSheetFunc);

	function styleSheetFunc(CSSStyleSheet)
	{
		forEach(CSSStyleSheet.cssRules, cssRuleFunc);
	}

	function cssRuleFunc(rule)
	{
		if (selectorText.indexOf(rule.selectorText) != -1)
		forEach(rule.style, cssRuleAttributeFunc);

		function cssRuleAttributeFunc(attribName)
		{
			if (attribName == tgtAttribName)
            {
				rule.style[attribName] = newValue;
                console.log('attribute replaced');
            }
		}
	}
}

#coords
{
    font-size: 0.75em;
	width: 10em;
	background-color: red;
}
.that
{
	color: blue;
}

<style>.that{color: green;font-size: 3em;font-weight: bold;}</style>

<button id='goBtn'>Change css rules</button>
	<div id='coords' class='that'>Test div</div>

<style>.that{color: blue;font-size: 2em;font-weight: bold;}</style>

Answer 3

@synthet1c 已经描述了这个问题。我的解决方案是：

$("head").append('<style></style>');
var element = $("head").children(':last');
element.html('.redclass{color: darkred;}');

Answer 4

您遇到的问题是，当您使用 jQuery 选择器 $('.redclass').css('color', 'darkRed') 时，您将获取当前具有该类的所有元素并使用 javascript 循环遍历集合并设置样式属性。

然后您在跨度上设置类。设置颜色时未包含在集合中

您应该在 css 文件中设置类，以便将其分发给具有该类的所有元素

console.log($('.redclass').length)
$("p").addClass("redclass");
console.log($('.redclass').length)
// $(".redclass").css("color", "darkRed");
$("span").addClass("redclass");
console.log($('.redclass').length)

.redclass {
  color: darkRed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I want to be red! And I am.</p>
<span>I want to be red too but I'm not :'(</span>