Question

有没有办法使用jQuery来改变CSS类的属性，而不是元素属性？

这是一个实际的例子：

我有一个班级red

的div

.red {background: red;}

我想更改类red背景属性，而不是更改已分配类red背景的元素。

如果我使用jQuery .css() method：

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

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

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

Answer 1

您不能直接使用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);
    }
}

以上示例复制自：

How To Switch CSS Files On-The-Fly Using jQuery

动态添加样式元素

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

示例代码是从Alvaro this JSFiddle fiddle最初引用的in their comment复制的。

Answer 2

如果您无法通过动态加载来使用不同的样式表，则可以使用此函数来修改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"。

Answer 3

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

Answer 4

您可以删除类并动态添加类

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

Answer 5

您可以将一个类添加到红色div的父级，例如绿色式

$('.red').parent().addClass('green-style');

然后将样式添加到css

.green-style .red {
     background:green; 
}

因此，每当您在绿色样式下添加红色元素时，背景将为绿色

Answer 6

$(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是一个＆＃34;级联＆＃34;，无论您尝试为该选择器插入什么规则，您都可以附加到CSS文件的底部，它将覆盖在页面设置样式的任何内容加载。

在某些浏览器中，在操作CSS文件之后，你必须强制CSS去重绘＆＃34;通过调用DOM JS中的一些无意义的方法，如document.offsetHeight（它被抽象为DOM属性，而不是方法，所以不要使用＆＃34;（）＆＃34;） - 只需在CSSOM操作强制页面重绘旧浏览器后添加它。

以下是一个例子：

var stylesheet = $(document)[0].styleSheets[0]; stylesheet.insertRule('body { display:none; }', stylesheet.cssRules.length);

Answer 7

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");
}

Answer 8

您可能希望采用不同的方法：不是动态更改CSS，而是按照您希望的方式在CSS中预定义样式。然后使用JQuery在Javascript中添加和删除样式。（参见Ajmal的代码）

使用jQuery更改CSS类属性

8 个答案:

从文件动态加载CSS

动态添加样式元素