使用jQuery更改CSS类属性

前端之家收集整理的这篇文章主要介绍了使用jQuery更改CSS类属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法改变CSS类的属性,而不是元素属性,使用jQuery?

这是一个实际的例子:

我有一个类红色的div

.red {background: red;}

我想改变类红色背景属性,而不是分配类红色背景的元素。

如果我用jQuery .css() method

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

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

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

解决方法

您不能直接使用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引用。

猜你在找的jQuery相关文章