有没有一种方法可以使用jQuery更改CSS类的属性，而不是元素属性？
这是一个实际的例子：
我上课有一个div red
.red {background: red;}
我要更改类red背景属性，而不是已red分配了类背景的元素。
如果我使用jQuery .css（）方法做到这一点：
$('.red').css('background','green');
它会影响现在具有class的元素red。到这里为止一切都很好。但是，如果我进行Ajax调用，并在redclass中插入更多div ，则这些背景将不会具有绿色背景，而它们将具有初始red背景。
我可以再次调用jQuery .css（）方法。但是我想知道是否有一种方法可以更改类本身。请考虑这只是一个基本示例。
Answers:
您不能直接使用jQuery更改CSS属性。但是您至少可以通过两种方式达到相同的效果。
function updateStyleSheet(filename) {
newstylesheet = "style_" + filename + ".css";
if ($("#dynamic_css").length == 0) {
$("head").append("<link>")
css = $("head").children(":last");
css.attr({
id: "dynamic_css",
rel: "stylesheet",
type: "text/css",
href: newstylesheet
});
} else {
$("#dynamic_css").attr("href",newstylesheet);
}
}
上面的示例复制自：
$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');
示例代码是从Alvaro在其注释中最初引用的JSFiddle小提琴复制的。
如果无法通过动态加载来使用其他样式表，则可以使用此函数来修改CSS类。希望对您有帮助...
function changeCss(className, classValue) {
// we need invisible container to store additional css definitions
var cssMainContainer = $('#css-modifier-container');
if (cssMainContainer.length == 0) {
var cssMainContainer = $('<div id="css-modifier-container"></div>');
cssMainContainer.hide();
cssMainContainer.appendTo($('body'));
}
// and we need one div for each class
classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
if (classContainer.length == 0) {
classContainer = $('<div data-class="' + className + '"></div>');
classContainer.appendTo(cssMainContainer);
}
// append additional style
classContainer.html('<style>' + className + ' {' + classValue + '}</style>');
}
该函数将使用任何类名，并将任何先前设置的值替换为新值。注意，你可以通过以下到classValue添加多个值："background: blue; color:yellow"。
var cssMainContainer = $('<div id="css-modifier-container"></div>');classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
找不到我想要的答案，所以我自己解决了：
修改容器div！
<div class="rotation"> <!-- Set the container div's css -->
<div class="content" id='content-1'>This div gets scaled on hover</div>
</div>
<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>
您要在执行$ target.css（）之后保留的CSS
.content:hover {
transform: scale(1.5);
}
用css（）修改内容的div
$(".rotation").css("transform", "rotate(" + degrees + "deg)");
您可以删除类并动态添加类
$(document).ready(function(){
$('#div').removeClass('left').addClass('right');
});
$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
styleSheetIndex是对应于文件加载顺序的索引值<head>（例如0是第一个文件，1是下一个文件，依此类推。如果只有一个CSS文件，则使用0）。
rule是文本字符串CSS规则。像这样："body { display:none; }"。
lineIndex是该文件中的行号。要获取最后的行号，请使用$(document)[0].styleSheets[styleSheetIndex].cssRules.length。只是console.log那个styleSheet对象，它具有一些有趣的属性/方法。
因为CSS是“级联”的，所以无论您要为选择器插入什么规则，都可以将其追加到CSS文件的底部，它将覆盖页面加载时设置样式的所有内容。
在某些浏览器中，在处理完CSS文件之后，您必须通过在DOM JS中调用一些无意义的方法来强制CSS“重绘”，例如document.offsetHeight（它被抽象为DOM属性，而不是方法，因此请不要使用“（）”） -只需在CSSOM操作后强制页面在较旧的浏览器中重新绘制即可添加。
所以这是一个例子：
var stylesheet = $(document)[0].styleSheets[0];
stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);
$(document)[0]代替的意义document。
document之所以被包裹在jQuery/$对象中，是因为提出问题的人指定了如何使用jQuery。$(element)不同于element-jQuery将包装的元素转换为可以访问jQuery方法的set元素。$(element)[0]等价于$(element).get(0)。有关详细说明，请访问learning.jquery.com/using-jquery-core/jquery-object快乐审核...
$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);过度document.styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
$(`link[href="style.css"]`).prop("sheet");。它将总是返回要编辑的确切样式表，因为href / url在理想情况下在网页编辑中始终是唯一的：虽然只有在使用以下样式表加载样式表后才能使用<link>
这是Mathew Wolf提供的出色答案的一些改进。这将主容器作为样式标签附加到head元素，并将每个新类附加到该样式标签。简洁一点，我发现它运作良好。
function changeCss(className, classValue) {
var cssMainContainer = $('#css-modifier-container');
if (cssMainContainer.length == 0) {
var cssMainContainer = $('<style id="css-modifier-container"></style>');
cssMainContainer.appendTo($('head'));
}
cssMainContainer.append(className + " {" + classValue + "}\n");
}