使用 jQuery 更改 CSS 类属性

有没有一种方法可以使用 jQuery 来更改 CSS 类的属性，而不是元素属性？

这是一个实际的例子:

我有一个类 red的 div

.red {background: red;}

我想更改类 red背景属性，而不是指定类 red背景的元素。

如果使用 jQuery . css ()方法:

$('.red').css('background','green');

它会影响现在有类 red的元素。到这里一切都很好。 但是如果我进行一个 Ajax 调用，并插入更多带有 red类的 div，这些 div 将不会有绿色背景，它们将具有初始的 red背景。

我可以再次调用 jQuery . css ()方法。但我想知道是否有办法改变这门课本身。请考虑这只是一个基本的例子。

222599 次浏览
小开
最佳答案

你不能用 jQuery 直接改变 CSS 属性，但是你可以通过至少两种方式达到同样的效果。

从文件动态加载 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 小提琴。

小开

您可以移除类并动态地添加类

$(document).ready(function(){
$('#div').removeClass('left').addClass('right');
});
小开

如果不能通过动态加载使用不同的样式表，可以使用此函数修改 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"来添加多个值。

小开

您可以向红色 div 的父类添加一个类，例如绿色样式

$('.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");
}
小开

您可能需要采取一种不同的方法: 不要动态更改 CSS，而是按照您希望的方式在 CSS 中预定义样式。然后使用 JQuery 在 Javascript 中添加和删除样式。(见 Ajmal 的代码)

小开

$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);

styleSheetIndex是一个索引值，它与在 <head>中加载文件的顺序相对应(例如，0是第一个文件，1是下一个文件，等等，如果只有一个 CSS 文件，使用0)。

rule是一个文本字符串 CSS 规则。

lineIndex是该文件中的行号。要获取最后一个行号，请使用 $(document)[0].styleSheets[styleSheetIndex].cssRules.length。只有那个 styleSheet 对象的 console.log，它有一些有趣的属性/方法。

因为 CSS 是一个“级联”，无论您试图为该选择器插入什么规则，您都可以将其添加到 CSS 文件的底部，它将覆盖任何在页面加载时样式化的内容。

在一些浏览器中，在处理 CSS 文件之后，你必须通过调用像 document.offsetHeight这样的 DOM JS 中的一些无意义的方法来强制 CSS“重绘”(它被抽象为一个 DOM 属性，而不是方法，所以不要使用“()”)——只是在你的 CSSOM 操作强制页面在旧的浏览器中重绘之后添加。

举个例子:

Var 样式表 = $(document)[0] . styleSheets [0] ; Insert tRule (‘ body { display: none; }’，stylesheet.cssRules.length) ;

小开

没有找到我想要的答案，所以我自己解决了:
修改容器 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)");

代码化的例子


提交答案