使用jQuery更改CSS类属性

Question

使用jQuery更改CSS类属性

83

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

这是一个实际的例子：

我有一个class为red 的div。

.red {background: red;}

我想改变类名为red的CSS背景属性，而不是那些已经被指定了类名为red背景属性的元素。

如果我使用jQuery的.css()方法：

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

它将影响当前具有类名为red的元素。到这里一切都好。但是如果我进行Ajax调用，并插入更多具有red类的

，那么它们将没有绿色背景，而会有初始的red背景。

我可以再次调用jQuery的.css()方法。但我想知道是否有一种方法来更改类本身。请注意，这只是一个基本示例。

- Alvaro

5

我不相信你可以用jQuery改变实际的类。 - ayyp

1

我同意Andrew Peacock的观点，我不知道如何在加载后修改实际的CSS。然而，在更改元素类之后执行更新（将背景从红色更改为绿色）似乎是微不足道的。 - Mr Griever

您可以操作<style>元素。请参阅CSSStyleSheet.deleteRule和CSSStyleSheet.insertRule。 - bobobobo

另一个使用案例，实际上是带领我来到这里的一个案例，就是根据视口而不是使用 JS 来调整弹出窗口（实际上是一系列 DIV）的大小，只需分配特定的类，然后更改类定义即可。 - zontar

8个回答

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"。

- Mathew Wolf

5

确实很聪明！你应该在回答中包含代码并删除链接 ;) - Community

是的，请包含实际代码，而不是链接（这可能会破坏并使此答案无用）。 - Doug S

好的，抱歉我链接了 :) - Mathew Wolf

如果你没有编写这段代码，链接到原始来源是完全正确的（而且很多时候也是正确的）。 - Kenny Evitt

谢谢！工作做得非常好。我的IDE语法高亮器有两个小细节：

从 var cssMainContainer = $('<div id="css-modifier-container"></div>'); 中删除 var。
在 classContainer = cssMainContainer.find('div[data-class="' + className + '"]'); 中添加 var。

- kEnobus

11

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

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

- Ajmal Salim

10

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

- drumbumLOLcatz

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

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。只需将 styleSheet 对象记录在控制台上，它就具有一些有趣的属性/方法。

因为 CSS 是“级联”的，所以您要插入的任何规则都可以附加到 CSS 文件底部，并且它将覆盖在页面加载时进行的任何样式设置。

在某些浏览器中，在操作 CSS 文件之后，您必须通过调用 DOM JS 中的某些无意义的方法（例如 document.offsetHeight （它作为 DOM 属性抽象化，而不是方法，因此不要使用“()”））来强制 CSS 进行“重绘”-- 在旧版浏览器中，只需在 CSSOM 操作之后添加它即可强制页面重新绘制。

所以这里是一个例子：

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

- Benny Schmidt

嗨！我给你打个小负分，因为我不明白使用 $(document)[0] 代替 document 的意义所在。 - Pierre-Antoine Guillaume

@PierreAntoineGuillaume 你好。document 被包装在 jQuery/$ 对象中，因为提问者指定了使用 jQuery 如何实现。$(element) 不同于 element - jQuery 将被包装的元素转换为一个集合元素，该元素可以访问 jQuery 的方法。$(element)[0] 等同于 $(element).get(0)。这在 https://learn.jquery.com/using-jquery-core/jquery-object/ 中有更详细的解释。祝管理愉快... - Benny Schmidt

我不知道那个，很有趣。如果你不编辑，我就无法去除负一，这有点糟糕。 - Pierre-Antoine Guillaume

jQuery还有一个名为.get()的方法，它提供了一个相关的功能。它不是返回一个包装在jQuery中的DOM元素，而是返回DOM元素本身。另外，因为jQuery对象类似于数组，所以可以通过方括号进行数组下标操作：无论哪种情况，firstHeadingElem都包含原生的DOM元素。因此，在$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);和document.styleSheets[styleSheetIndex].insertRule(rule, lineIndex);之间确实没有必要。 - Pierre-Antoine Guillaume

我想补充一下，我发现这是获取特定样式表最简单的方法：$(\link[href="style.css"]`).prop("sheet");`。它总是会返回你想要编辑的确切样式表，因为 href/url 在网页中是唯一的。编辑：但是只有在使用<link>加载样式表时才有效。 - Akhil Gupta

如果使用<style>，请为其分配一个id并使用$("#myStyle").prop("sheet");。<link>也可以这样做。 - Akhil Gupta

1

你可以给红色 div 的父元素添加一个类，例如 green-style。

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

然后将样式添加到CSS中。

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

每次在绿色样式下添加红色元素时，背景将是绿色。

- Welly

0

这是对Mathew Wolf提供的出色答案的一点改进。这个方法将主容器作为样式标签附加到头元素，并将每个新类别附加到该样式标签中。更加简洁，我发现它运行良好。

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

- Justin MacArthur

据我所见，与这个答案不同的是，您只是在追加而不是替换值... - lindon fox

0

你可能希望采取一种不同的方法：不要动态地更改 CSS，而是在 CSS 中预定义你想要的样式。然后使用 JQuery 在 Javascript 中添加和移除样式。(参见 Ajmal 的代码)

- checkmate711

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dennis Traub · Accepted Answer

您不能直接使用jQuery更改CSS属性。但是，您可以通过至少两种方式实现相同的效果。

从文件中动态加载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);
    }
}

上面的示例来自：

使用jQuery动态切换CSS文件

动态添加样式元素

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

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