如何通过 Javascript 更改 css 类样式？答案

【问题标题】：How to change a css class style through Javascript?如何通过 Javascript 更改 css 类样式？
【发布时间】：2010-02-08 11:18:33
【问题描述】：

根据我正在阅读的书，当您使用 Javascript 时，最好按类更改 CSS。但是怎么做？有人可以为此提供一个示例 sn-p 吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

假设你有：

<div id="mydiv" class="oldclass">text</div>

以及以下样式：

.oldclass { color: blue }
.newclass { background-color: yellow }

您可以像这样在 javascript 中更改 mydiv 上的类：

document.getElementById('mydiv').className = 'newclass';

在 DOM 操作之后，您将得到：

<div id="mydiv" class="newclass">text</div>

如果你想添加一个新的css类而不删除旧的，你可以追加它：

document.getElementById('mydiv').className += ' newClass';

这将导致：

<div id="mydiv" class="oldclass newclass">text</div>

【讨论】：

代替document.getElementById('mydiv').className += ' newClass';，使用classList添加和删除类：document.getElementById('mydiv').classList.add('newclass');。通过这种方式，您无需在添加之前测试该类是否已经存在，add 方法将为您执行此操作。与 remove 类似，您不必在操作 className 属性之前测试一个类是否存在。您也不必记住在要添加的类前面加上空格。
@nwayve: classList 仅支持 IE >= 10、Chrome >= 34、Firfox >= 29 和 Safari >= 7。来源：caniuse.com/#search=classList。如果您需要对旧版浏览器的支持，请使用className。
@Asaph：实际上它在 Chrome >= 8.0、Firefox >= 3.6、Safari >=5.1、Opera >= 11.5 和 IE >= 10.0 中支持。 Source（点击显示所有版本）。您应该担心支持的唯一旧浏览器是 IE classList.js 这样的 polyfill 应该可以正常工作。
@nwayve：您链接的来源与我所做的相同。但我不知道我需要单击“显示所有版本”才能查看支持的最低版本（如果你问我，这不是最直观的用户界面）。感谢您的澄清。无论如何，这一点仍然存在，className 比classList 更向后兼容。
基本答案，但只有一个。

【解决方案2】：

如果您想操作实际的 CSS 类而不是修改 DOM 元素或使用修饰符 CSS 类，请参阅 https://stackoverflow.com/a/50036923/482916.

【讨论】：

【解决方案3】：

由于 classList is supported in all major browsers 和 jQuery drops support for IE<9（在 2.x 分支中，因为 Stormblack 在评论中指出），考虑到这个 HTML

<div id="mydiv" class="oldclass">text</div>

您可以轻松地使用以下语法：

document.getElementById('mydiv').classList.add("newClass");

这也会导致：

<div id="mydiv" class="oldclass newclass">text</div>

此外，您还可以使用remove, toggle, contains 方法。

【讨论】：

澄清 - jQuery 并没有放弃对 IE
我认为这是最好的纯JS解决方案，使用add和remove。比公认的答案好得多。

【解决方案4】：

使用 vanilla javascript 可以通过两种方式完成此操作。第一个是className，第二个是classList。 className 适用于所有浏览器，但在修改元素的类属性时可能难以使用。 classList 是修改元素类的更简单方法。

要直接设置元素的类属性，className 是可行的方法，否则要修改元素的类，使用classList 更容易。

初始HTML

<div id="ID"></div>

设置类属性

var div = document.getElementById('ID');
div.className = "foo bar car";

结果：

<div id="ID" class="foo bar car"></div>

添加一个类

div.classList.add("car");// Class already exists, nothing happens
div.classList.add("tar");

注意： 在添加一个类之前不需要测试它是否存在。如果需要添加一个类，只需添加它。如果已存在，则不会添加副本。
结果：

<div id="ID" class="foo bar car tar"></div>

删除一个类

div.classList.remove("car");
div.classList.remove("tar");
div.classList.remove("car");// No class of this name exists, nothing happens

注意： 就像add，如果需要删除一个类，请将其删除。如果它在那里，它将被删除，否则不会发生任何事情。
结果：

<div id="ID" class="foo bar"></div>

检查类属性是否包含特定类

if (div.classList.contains("foo")) {
  // Do stuff
}

切换类

var classWasAdded = div.classList.toggle("bar"); // "bar" gets removed
// classWasAdded is false since "bar" was removed

classWasAdded = div.classList.toggle("bar"); // "bar" gets added
// classWasAdded is true since "bar" was added

.toggle 有第二个 boolean 参数，在我看来，它是多余的，不值得重复。

有关classList 的更多信息，请查看MDN。它还涵盖了browser compatibility，如果这是一个问题，可以通过使用 Modernizr 进行检测并在需要时使用 polyfill 来解决。

【讨论】：

【解决方案5】：

使用className 属性：

document.getElementById('your_element_s_id').className = 'cssClass';

【讨论】：

小心，如果你只是想添加一个新类，这种方式将替换所有 class="" 属性，而不仅仅是追加新的。

【解决方案6】：

我强烈推荐 jQuery。然后它变得如此简单：

$('#mydiv').addClass('newclass');

您不必担心删除旧类，因为 addClass() 只会附加到它。你也有 removeClass();

与 getElementById() 方法相比的另一个优点是，您可以通过一行代码将其同时应用于多个元素。

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

第一个示例将类添加到页面上的所有 DIV 元素。第二个示例将新类添加到当前具有旧类的所有元素中。

【讨论】：

感谢先生的提示。我很快就会讲到。我刚刚开始阅读有关 javascript 的内容；)
使用框架的另一个好处是，您可以更轻松地添加或删除类名，而不是简单地替换整个类属性的值（例如，从类属性为“”的元素中删除“myclass” myclass myotherclass”，否则您必须将属性值替换为“myotherclass”，或者做一些时髦的事情，例如将字符串拆分为一个数组并在将其重新组合在一起之前从中删除条目“myclass”等。Go Frameworks！跨度>
我从来没有考虑过使用 Javascript 库，因为我认为它只是另一个可以使用的框架，另一个 JS 文件下载，另一个调试位置以发现问题...... yada yada雅达。有一天我很无聊，硬着头皮尝试了 jQuery。在一个小时内，我发誓永远不会在没有它的情况下创建网站或 web 应用程序——这太容易了！你甚至可以学习 jQuery 而永远不会接触任何其他 Javascript。
了解如何在没有框架的情况下做事是件好事，这有助于理解以及何时想要做一些真正轻量级的事情，但没有理由不使用像 jQuery 这样的库进行大多数开发。
完全同意，马克。我现在认为它就像是一名经理 - 永远不要将工作委托给你自己无法完成的下属。 IE。永远不要使用框架来做你自己不知道该怎么做的事情。

【解决方案7】：

您可能还对使用 jQuery 修改它感兴趣： http://api.jquery.com/category/css/

【讨论】：

【解决方案8】：

document.getElementById("my").className = 'myclass';

【讨论】：

【解决方案9】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("div").addClass(function(){
            return "par" ;
    });
});
</script>
<style>
.par {
    color: blue;
}
</style>
</head>
<body>
<div class="test">This is a paragraph.</div>
</body>
</html>

【讨论】：