Question

是否可以使用JQuery更改CSS类的内容？

例如，我有以下页面：

html

<div class="foo"> FOO </div>

css

.foo {
    color: black;
}

现在，我想更改foo类中的颜色，并可能在该类中添加另一个CSS属性。我可以用JQuery做到吗？

这样我就会得到

css

.foo {
    color: red;
    display: inline;
}

我知道可以以任何想要的方式修改特定元素的样式，但是我对此处的类内容更改感兴趣。

谢谢。

Answer 1

您可以使用此

$(".foo").css({"color": "red", "display": "inline"});

Answer 2

是的，您可以使用http://api.jquery.com/attr/更改整个班级，如下所示。但是您需要为您的元素分配ID。

<div id="dv_id" class="foo"> FOO </div>
$("#dv_id").attr('class', 'newClass');

您甚至可以像这样添加类或切换类：

$("#dv_id").addClass('newClass');
$("#dv_id").toggleClass('change_me newClass');

或者可能是您在寻找Change CSS class properties with jQuery

希望这会帮助您解决问题

Answer 3

您无法更改外部CSS文件的内容。但是，您可以覆盖它。如果未在外部CSS文件中定义CSS类，则可以对其进行更改。

我认为您的目的是更改具有同一类foo的所有元素的样式，并且您希望一次在一个地方进行一次。在这种情况下，覆盖样式将达到您的目的。

只需创建定义样式的样式标签，然后将其插入<head></head>标签的末尾

尝试一下：

$('<style>.foo { color: red, display: inline; }</style>').appendTo('head');

Answer 4

以下是您问题的部分答案...我认为这是您想要的：

**JS**
$(document).ready(function() {
    let css = "";
    $.ajax({
        method: 'get',
        url: 'test.css',
        success: function(response) {
            css = response;
            let pos = css.indexOf(".foo {");
            innerText = "   backgound: #ccc";
            css = css.substring(0, pos + ".foo {".length) + "\n" +  innerText + "\n}";
            console.log(css);
        }
    });
});

**CSS Input**
.foo {
    color:black;
}

**CSS Output**
.foo {
   backgound: #ccc
}

假设：您的css文件与html放在同一文件夹中。 Javascript的唯一问题是它不允许您写入外部文件。使用一个名为twFile的旧插件检查了jQuery插件。我找不到缩小的代码/其他。看看您是否可以进一步……仅将其写入文件（也许是nodejs）。

Answer 5

您可以使用两个不同的CSS文件，并在事件上的链接标签中切换URL。

<link rel="shortcut icon" href="FIRST_CSS_FILE_URL">


$('button').click(function() {
    $('link').attr('href', SECOND_CSS_FILE_URL)   
})

使用JQuery更改CSS类内容

5 个答案: