使用jQuery更改CSS类属性
有没有办法改变一个CSS类的属性，而不是元素属性，使用jQuery？
这是一个实际的例子：
我有一个与red类的div
.red {background: red;}
我想改变类的red背景属性，而不是red背景分配类的元素。
如果我使用jQuery .css（）方法 ：
$('.red').css('background','green');
它会影响到现在有red的元素。 到这里一切都很好。 但是，如果我做了一个Ajax调用，并插入更多的red类的div，那些将不会有一个绿色的背景，他们将有最初的red背景。
我可以再次调用jQuery .css（）方法 。 但是我想知道是否有办法改变class级本身。 请考虑这只是一个基本的例子。
你不能直接用jQuery来改变CSS属性。 但是至less可以通过两种方式达到同样的效果。
从文件dynamic加载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); } }
上面的例子是从
- 如何使用jQuery实时切换CSS文件
dynamic添加一个样式元素
$("head").append('<style type="text/css"></style>'); var newStyleElement = $("head").children(':last'); newStyleElement.html('.red{background:green;}');
示例代码是从Alvaro最初在其评论中引用的这个JSFiddle小提琴中复制的。
如果你不能通过dynamic加载不同的样式表，你可以使用这个函数来修改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>'); }
这个函数将取任何类名称，并用新值replace之前设置的值。 请注意，您可以通过将以下内容传递给classValue来添加多个值： "background: blue; color:yellow" 。
您可以删除类并dynamic添加类
$(document).ready(function(){ $('#div').removeClass('left').addClass('right'); });
没有find我想要的答案，所以我自己解决：
修改一个容器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)");
Codepen示例
你可以添加一个类到红色的父母，例如绿色风格
$('.red').parent().addClass('green-style');
然后将样式添加到CSS
.green-style .red { background:green; }
所以每次你在绿色风格下添加红色元素，背景将是绿色的
马修·沃尔夫（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"); }
您可能需要采取不同的方法：而不是dynamic更改CSS，而是按照您希望的方式在CSS中预定义样式。 然后使用JQuery在Javascript中添加和删除样式。 （参见Ajmal的代码）
$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
styleSheetIndex是与你在<head>加载文件的顺序相对应的索引值（例如，如果只有一个CSS文件，则使用0，如0是第一个文件，1是下一个等等）。
rule是一个文本string的CSS规则。 像这样： "body { display:none; }" 。
lineIndex是该文件中的行号。 要获得最后一个行号，请使用$(document)[0].styleSheets[styleSheetIndex].cssRules.length 。 只要console.log styleSheet对象，它有一些有趣的属性/方法。
因为CSS是一个“级联”，无论您想要为该select器插入什么规则，您都可以追加到CSS文件的底部，并且会覆盖页面加载时样式化的任何内容。
在一些浏览器中，操作CSS文件后，必须通过调用DOM中的一些无意义的方法（比如document.offsetHeight （它被抽象为一个DOM属性，而不是方法）来强制CSS“重绘”，所以不要使用“ ）“） – 简单地说，在CSSOM操作之后，强制页面在旧浏览器中重绘。
所以这里是一个例子：
var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);
