如何动态更改类css样式？

Question

目标

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

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

问题

要做的第一件事是我使用$(".className").css()方法，但它仅针对已经具有className类的元素更改样式，即如果我以后< / strong>将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');

摘录：

$("<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

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

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

Answer 3

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

他们基本上实现了这一目标：

<强>之前

.someClass
{
  color: red;
}

<强>后

.someClass
{
  color: red;
}

.someClass
{
  color: white;
}

在许多情况下，更好的选项会更改现有规则的颜色属性。

嗯，事实证明 - 浏览器维护了一系列样式表，样式表规则和所述规则的属性。相反，我们可能更愿意找到现有规则并对其进行更改。 （我们当然更喜欢对我出现的那个进行错误检查的方法！）

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

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 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>