使用jQuery更改CSS类属性

Question

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

这是一个实际的例子:

我和班上有一个div red

.red {background: red;}

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

如果我用jQuery .css()方法做到这一点:

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

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

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

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

以上示例复制自:

• 如何使用jQuery即时切换CSS文件

动态添加样式元素

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

该示例代码是从复制本的jsfiddle小提琴最初由阿尔瓦罗引用他们的评论.

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示例

Answer 4

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

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