使用 jQuery 更改 CSS 类属性答案

【问题标题】：Change CSS class properties with jQuery使用 jQuery 更改 CSS 类属性
【发布时间】：2012-07-13 12:53:21
【问题描述】：

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

这是一个实际的例子：

我有一个类为red的div

.red {background: red;}

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

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

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

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

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

【问题讨论】：

我不相信你可以用 jQuery 改变实际的类。
我同意 Andrew Peacock，我不知道加载后无法修改实际的 css。但是，在更改元素类之后执行更新（将背景从红色更改为绿色）似乎微不足道。
您或许能够操纵<style> 元素。见CSSStyleSheet.deleteRule和CSSStyleSheet.insertRule
另一个用例，实际上是把我带到这里的那个，是根据视口调整弹出窗口（实际上是一系列DIV）的大小，不使用JS，只需分配某个类然后更改类定义。

标签： jquery css ajax class properties

【解决方案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;}');

示例代码复制自 this JSFiddle fiddle，最初由 Alvaro in their comment 引用。

【讨论】：

甚至更短：$("head").append('');稍后在代码中： $('#style_changer').html('.red{background:green;}');
这个解决方案“动态添加样式元素”对我来说是完美的。谢谢！并且@Tertium 升级更好。
第二部分的一个衬里：$("head").append('<style type="text/css">.red{background:green;}</style>'); 谢谢，@Tertium

【解决方案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"。

【讨论】：

其实很聪明！您应该将代码包含在您的答案中并删除链接；）
是的，请包含实际代码，而不是链接（这可能会破坏并使此答案无用）。
好的，抱歉链接:)
如果您不是自己编写此代码，那么链接到原始源（而且很多都是正确的）没有任何问题。
谢谢！优秀作品。我的 IDE 语法高亮显示的 2 个小细节： 1. 从 var cssMainContainer = $('<div id="css-modifier-container"></div>'); 中删除 var 2. 将 var 添加到：classContainer = cssMainContainer.find('div[data-class="' + className + '"]');

【解决方案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

【讨论】：

这在非常大的 DOM 上表现如何？似乎任何 jQuery 选择器都需要很长时间，因为它必须筛选大型 DOM...

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

嗨！一个很小的 -1，因为我没有看到使用 $(document)[0] 代替 document 的意义。
@PierreAntoineGuillaume 嗨。 document 被包裹在 jQuery/$ 对象中，因为提出问题的人指定了如何使用 jQuery 进行操作。 $(element) 与 element 不同 - jQuery 将包装元素转换为可以访问 jQuery 方法的 set 元素。 $(element)[0] 等价于 $(element).get(0)。这在learn.jquery.com/using-jquery-core/jquery-objectHappy moderating 有更详细的解释...
我不知道，这很有趣。如果你不编辑，我不能删除减号，这有点糟糕
"jQuery 还有一个名为 .get() 的方法，它提供了一个相关的功能。它不是返回一个 jQuery 包装的 DOM 元素，而是返回 DOM 元素本身。或者，因为 jQuery 对象是 "类似数组，“它支持通过方括号进行数组下标：无论哪种情况，firstHeadingElem 都包含本机 DOM 元素。”，所以确实没有意义在 $(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex); 上做 document.styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
我想添加我发现这是获取特定样式表的最简单方法$(`link[href="style.css"]`).prop("sheet"); 它总是会返回您要编辑的确切样式表，如 href/url理想情况下，在网页中始终是唯一的编辑：尽管只有使用 <link>

【解决方案6】：

您可以向红色 div 的父级添加一个类，例如绿色风格

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

然后给css添加样式

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

所以每次在绿色样式下添加红色元素，背景都会变成绿色

【讨论】：

【解决方案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");
}

【讨论】：

据我所知，与this answer 不同，您只是附加而不是替换值...

【解决方案8】：

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

【讨论】：