使用 JQuery 更改 css 类内容答案

【问题标题】：Change css class content with JQuery使用 JQuery 更改 css 类内容
【发布时间】：2019-08-07 22:03:10
【问题描述】：

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

例如，我有以下页面：

html

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

css

.foo {
    color: black;
}

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

这样我会得到

css

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

我了解可以以任何我想要的方式修改特定元素的样式，但我有兴趣在此处更改课程内容。

谢谢。

【问题讨论】：

如果我理解，您想在 CSS 文件中写入来更新类？据我所知，你不能单独使用 jQuery 来做到这一点。您可能需要使用 Java、PHP 等服务器编程语言来做到这一点
@Knriano，你几乎正确地理解了我。一件事是我不在乎css文件是否会改变，我只想要更新页面的css类，即如果更新只在内存中发生，那也很好。谢谢。

标签： javascript jquery css class attributes

【解决方案1】：

你可以用这个

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

【讨论】：

请允许我引用我的问题，I understand that it is possible to modify the style of a specific element in any way I want, but I am interested in changing class content here. 谢谢。

【解决方案2】：

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

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


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

【讨论】：

迄今为止最简洁的解决方案。谢谢。

【解决方案3】：

是的，您可以使用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

希望这能帮助您解决问题

【讨论】：

它不会改变类本身。因此，答案根本没有用。谢谢。
请让我引用我的问题，I understand that it is possible to modify the style of a specific element in any way I want, but I am interested in changing class content here. 谢谢。

【解决方案4】：

您不能更改外部 css 文件的内容。但是，您可以覆盖它。如果外部 css 文件中没有定义 css 类，您可以更改它。

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

只需制作定义样式的样式标签并将其插入到<head></head>标签的末尾

试试这个：

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

【讨论】：

是的，这是一个不错的解决方案。谢谢。

【解决方案5】：

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

**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）。

【讨论】：

这是一个很好的答案。谢谢。