77

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

这是一个实际的例子：

我有一个带类的 divred

.red {background: red;}

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

如果我用 jQuery .css() 方法来做：

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

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

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

4

8 回答 8

46

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

示例代码是从这个 JSFiddle fiddle复制的，最初由 Alvaro在他们的评论中引用。

于 2012-07-13T16:27:33.693 回答
21

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

于 2013-11-07T01:36:36.107 回答
9

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

代码笔示例

于 2015-12-14T00:06:54.137 回答
8

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

$(document).ready(function(){
    $('#div').removeClass('left').addClass('right');
});
于 2013-07-23T10:22:17.387 回答
2

$(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);

于 2015-07-27T18:11:36.413 回答
1

您可以向红色 div 的父级添加一个类，例如 green-style

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

然后将样式添加到css

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

所以每次在绿色样式下添加红色元素时，背景都是绿色的

于 2013-11-07T03:09:03.503 回答
0

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

于 2015-02-08T11:28:23.857 回答
0

这是对 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");
}
于 2014-11-27T01:17:22.597 回答