对于像jQuery这样的库来说，这是最简单的：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

没有冒犯，但即时更改类是不明智的，因为它迫使 CSS 解释器重新计算整个网页的视觉呈现。

原因是 CSS 解释器几乎不可能知道是否可以更改任何继承或级联，因此简短的回答是：

永远不要即时更改 className！

但通常只需要更改一两个属性，这很容易实现：

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

您可以像这样使用：node.className

document.getElementById('foo').className = 'bar';

根据 PPK，这应该适用于 Internet Explorer 5.5 及更高版本。

用于更改类的现代 HTML5 技术

现代浏览器添加了 classList，它提供了一些方法，可以更轻松地操作类，而无需库：

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

遗憾的是，这些在 v10 之前的 Internet Explorer 中不起作用，尽管有一个填充码可以向 IE8 和 IE9 添加对它的支持，可从此页面获得。然而，它得到了越来越多的支持。

简单的跨浏览器解决方案

选择元素的标准 JavaScript 方法是使用 document.getElementById（“Id”），这是以下示例使用的 - 您当然可以通过其他方式获取元素，在适当的情况下可以简单地使用代替 - 但是，对此进行详细介绍超出了答案的范围。this

要更改元素的所有类，请执行以下操作：

若要将所有现有类替换为一个或多个新类，请设置 className 属性：

document.getElementById("MyElement").className = "MyClass";

（可以使用空格分隔的列表来应用多个类。

要向元素添加其他类，请执行以下操作：

要在不删除/影响现有值的情况下将类添加到元素中，请附加一个空格和新类名，如下所示：

document.getElementById("MyElement").className += " MyClass";

要从元素中删除类，请执行以下操作：

若要在不影响其他潜在类的情况下将单个类删除到元素中，需要进行简单的正则表达式替换：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

此正则表达式的解释如下：

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

该标志指示替换根据需要重复，以防类名被多次添加。g

要检查类是否已应用于元素，请执行以下操作：

上面用于删除类的正则表达式也可以用作检查特定类是否存在的检查：

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

虽然可以直接在 HTML 事件属性（例如 ）中编写 JavaScript，但不建议这样做。特别是在大型应用程序上，通过将 HTML 标记与 JavaScript 交互逻辑分离，可以实现更易于维护的代码。onClick="this.className+=' MyClass'"

实现此目的的第一步是创建一个函数，并在 onClick 属性中调用该函数，例如：

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onClick="changeClass()">My Button</button>

_{（不需要在脚本标记中包含此代码，这只是为了示例的简洁性，并且将 JavaScript 包含在不同的文件中可能更合适。}

第二步是将 onClick 事件移出 HTML 并移入 JavaScript，例如使用 addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

（请注意，window.onload 部分是必需的，以便在 HTML 完成加载后执行该函数的内容 - 如果没有它，调用 JavaScript 代码时 MyElement 可能不存在，因此该行将失败。

JavaScript 框架和库

上面的代码都是标准的 JavaScript，但是，通常的做法是使用框架或库来简化常见任务，并从编写代码时可能没有想到的修复错误和边缘情况中受益。

虽然有些人认为添加一个 ~50 KB 的框架来简单地更改一个类是矫枉过正的，但如果你正在做任何大量的 JavaScript 工作或任何可能具有异常跨浏览器行为的事情，那么它非常值得考虑。

（粗略地说，库是一组为特定任务设计的工具，而框架通常包含多个库并执行一整套职责。

上面的例子已经用jQuery复制了下面，jQuery可能是最常用的JavaScript库（尽管还有其他值得研究的）。

（请注意，这里是 jQuery 对象。$

使用 jQuery 更改类：

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

此外，jQuery还提供了一个快捷方式，用于添加不适用的类，或删除符合以下条件的类：

$('#MyElement').toggleClass('MyClass');

$('#MyElement').click(changeClass);

或者，无需 ID：

$(':button:contains(My Button)').click(changeClass);

生产线

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

应该是：

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

在 ASP.NET 中使用 JavaScript 更改元素的 CSS 类：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

在我的一个没有使用 jQuery 的旧项目中，我构建了以下函数来添加、删除和检查元素是否具有类：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls))
        ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

因此，例如，如果我想向按钮添加一些类，我可以使用这个：onclick

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

到现在为止，可以肯定的是，使用jQuery会更好。

您也可以这样做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

要切换一个类（如果存在，请删除，否则添加它）：

document.getElementById('id').classList.toggle('class');

使用纯 JavaScript 代码：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

为了添加来自另一个流行框架 Google Closures 的信息，请参阅它们的 dom/classes 类：

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

选择元素的一个选项是将 goog.dom.query 与 CSS 3 选择器一起使用：

var myElement = goog.dom.query("#MyElement")[0];

这对我有用：

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

哇，惊讶这里有这么多矫枉过正的答案......

<div class="firstClass" onclick="this.className='secondClass'">

对前面的正则表达式进行一些小的注释和调整：

如果类列表多次具有类名，则需要全局执行此操作。而且，您可能希望从类列表的末尾剥离空格，并将多个空格转换为一个空格，以防止空格运行。如果唯一使用类名的代码使用下面的正则表达式并在添加名称之前删除名称，那么这些事情都不是问题。但。好吧，谁知道谁可能在玩类名列表。

此正则表达式不区分大小写，因此在不关心类名大小写的浏览器上使用代码之前，类名中的错误可能会出现。

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

我会使用jQuery并编写如下内容：

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

此代码添加了一个函数，当单击 id some-element 的元素时要调用该函数。如果 clicked 还不是元素的一部分，则该函数会将其附加到元素的 class 属性中，如果存在，则将其删除。

是的，您确实需要在页面中添加对 jQuery 库的引用才能使用此代码，但至少您可以确信库中的大多数函数几乎可以在所有现代浏览器上运行，并且这将节省您实现自己的代码的时间。

这是我的版本，完全工作：

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

用法：

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

此外，您还可以扩展 HTMLElement 对象，以便添加添加、删除、切换和检查类的方法（要点）：

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

然后像这样使用（单击将添加或删除类）：

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

这是演示。

我在代码中使用以下普通 JavaScript 函数。它们使用正则表达式，但不需要在正则表达式中引用特殊字符。indexOf

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

您还可以在现代浏览器中使用 element.classList。

下面是一个简单的jQuery代码来做到这一点：

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

这里

• Class1 是事件的侦听器。
• 父类是承载要更改的类的类
• Classtoremove 是您拥有的旧类。
• 要添加的类是要添加的新类。
• 100 是更改类的超时延迟。

只是以为我会把这个扔进去：

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

下面是一个 toggleClass，用于在元素上切换/添加/删除类：

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

请参阅 JSFiddle。

另请参阅我在此处动态创建新类的答案。

在支持 Internet Explorer 6 的 vanilla JavaScript 中更改元素的类

您可以尝试使用 node 属性来保持与旧浏览器（甚至是 Internet Explorer 6）的兼容性：attributes

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})

.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}

<span id="message" class="">Click me</span>

除非您需要维护其他现有类，否则请使用，在这种情况下，您可以使用这些方法。myElement.classList="new-class"classList.add, .remove

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});

div{
  min-height: 48px;
  min-width: 48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background: green;
}
.blue{
  background: blue;
}

<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

好的，我认为在这种情况下，您应该使用 jQuery 或在纯 JavaScript 中编写自己的方法。我的偏好是添加我自己的方法，而不是将所有jQuery注入到我的应用程序中，如果我出于其他原因不需要它。

我想做如下的事情作为我的 JavaScript 框架的方法，以添加一些处理添加类、删除类等的功能。与 jQuery 类似，IE9+ 完全支持此功能。此外，我的代码是用 ES6 编写的，所以你需要确保你的浏览器支持它，或者你使用像 Babel 这样的东西，否则需要在你的代码中使用 ES5 语法。同样通过这种方式，我们通过 ID 查找元素，这意味着元素需要有一个 ID 才能被选中：

// Simple JavaScript utilities for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

您可以简单地使用它们，如下所示。假设您的元素的 id 为 'id'，class 为 'class'。确保将它们作为字符串传递。您可以按如下方式使用该实用程序：

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

classListDOM API：

添加和删除类的一种非常方便的方式是 DOM API。此 API 允许我们选择特定 DOM 元素的所有类，以便使用 JavaScript 修改列表。例如：classList

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

我们可以在日志中观察到，我们返回的对象不仅包含元素的类，还包含许多辅助方法和属性。此对象继承自接口 DOMTokenList，该接口在 DOM 中用于表示一组空格分隔的标记（如类）。

例：

const el = document.getElementById('container');

function addClass () {
    el.classList.add('newclass');
}


function replaceClass () {
    el.classList.replace('foo', 'newFoo');
}


function removeClass () {
    el.classList.remove('bar');
}

button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color: powderblue;
}

.newclass{
  border: 2px solid green;
}

<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis
  iste natus error sit voluptatem accusantium doloremque laudantium,
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
  voluptatem quia voluptas
 </div>

<button onclick="addClass()">AddClass</button>

<button onclick="replaceClass()">ReplaceClass</button>

<button onclick="removeClass()">removeClass</button>

是的，有很多方法可以做到这一点。在 ES6 语法中，我们可以轻松实现。使用此代码切换添加和删除类。

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){

  tab.onclick = function(){

    let activetab = document.querySelectorAll('li.active');

    activetab[0].classList.remove('active')

    tab.classList.add('active');
  }

}

body {
    padding: 20px;
    font-family: sans-serif;
}

ul {
    margin: 20px 0;
    list-style: none;
}

li {
    background: #dfdfdf;
    padding: 10px;
    margin: 6px 0;
    cursor: pointer;
}

li.active {
    background: #2794c7;
    font-weight: bold;
    color: #ffffff;
}

<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

TL;博士：

document.getElementById('id').className = 'class'

或

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

就是这样。

而且，如果你真的想知道原因并教育自己，那么我建议你阅读彼得·鲍顿的回答。太完美了。

注意：

这可以通过（文档或事件）实现：

• getElementById()
• getElementsByClassName()
• querySelector()
• querySelectorAll()

尝试：

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

<div onclick="change(this)" class="first">Click me</div>

选项。

这里有一些样式与 classList 示例，让您了解有哪些可用选项以及如何使用它们来执行您想要的事情。classList

style 与 classList

and 之间的区别在于，您正在添加到元素的样式属性中，但有点控制元素的类（、、、），我将向您展示如何使用 and 方法，因为这些是流行的方法。styleclassListstyleclassListaddremovetogglecontainaddremove

样式示例

如果要将属性添加到元素中，则可以执行以下操作：margin-top

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

classList 示例

假设我们有一个 ，在本例中，我们已经将 2 个类添加到我们的 div 元素中，并且 ，并且我们想要控制删除哪些类以及添加哪些类。这就是派上用场的地方。<div class="class-a class-b">class-aclass-bclassList

删除class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

加class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

使用 Peter Boughton 的答案，这里有一个简单的跨浏览器函数来添加和删除类。

添加类：

classed(document.getElementById("denis"), "active", true)

删除类：

classed(document.getElementById("denis"), "active", false)

JavaScript 中有一个属性 className，用于更改 HTML 元素的类的名称。现有的类值将替换为您在 className 中分配的新值。

<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
    var icon=document.getElementById("icon");
    icon.className = "fa fa-gear";
}
</script>
</body>
</html>

信用 - 如何在 JavaScript 中更改 HTML 元素的类名

OP 问题是如何使用 JavaScript 更改元素的类？

现代浏览器允许您使用一行 JavaScript 来执行此操作：

document.getElementById('id').classList.replace('span1', 'span2')

该属性提供了一个 DOMTokenList，它具有多种方法。您可以使用简单的操作（如 add（））、remove（） 或 replace（））对元素的 classList 进行操作。或者变得非常复杂，像使用 keys（）、values（） 和 entries（） 操作对象或 Map 一样操作类。classList

彼得·鲍顿（Peter Boughton）的回答很好，但现在已经有十多年的历史了。所有现代浏览器现在都支持 DOMTokenList - 请参阅 https://caniuse.com/#search=classList 甚至 Internet Explorer 11 也支持一些 DOMTokenList 方法。

4 种可能的操作：添加、删除、检查和切换

让我们看看每个操作的多种方式。

1. 添加类

方法1：在现代浏览器中添加类的最佳方法是使用元素方法。classList.add()

• 案例 1：添加单个类

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding class
    element.classList.add('beautify');
  }
  

• 案例 2：添加多个类

  添加多个类 saperate 方法中的逗号类add()

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.classList.add('class1', 'class2', 'class3');
  }
  

方法 2 - 您还可以使用属性向 HTML 元素添加类。className

• 案例 1：覆盖预先存在的类 将新类分配给该属性时，它将覆盖上一个类。className

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.className = 'beautify';
  }
  

• 案例 2：在不覆盖的情况下添加类 对类使用运算符不覆盖以前的类。此外，在新类之前添加一个额外的空格。+=

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding single multiple class
    element.className += ' beautify';
    // adding multiple classes
    element.className += ' class1 class2 class3';
  }
  

2. 删除类

方法 1 - 从元素中删除类的最佳方法是方法。classList.remove()

• 案例 1：删除单个类

  只需在方法中传递要从元素中删除的类名即可。

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('beautify');
  }
  

• 案例 2：删除多个类

  传递多个类，以逗号分隔。

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('class1', 'class2', 'class3');
  }
  

方法 2 - 您还可以使用 method 删除类。className

• 案例 1：删除单个类 如果元素只有 1 个类，并且您想删除它，则只需为该方法分配一个空字符串即可。className

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = '';
  }
  

• 案例 2：删除多个类 如果元素有多个类，首先使用属性从元素中获取所有类，并使用 replace 方法，将所需的类替换为空字符串，最后将其分配给元素的属性。className className

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = element.className.replace('class1', '');
  }
  

3. 检查类

要检查元素中是否存在类，您可以简单地使用 classList.contains（） 方法。如果类存在，则返回 else，则返回 false。true

function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.classList.contains('beautify') {
      alert('Yes! class exists');
  }
}

4. 切换类

要切换类，请使用 classList.toggle（） 方法。

function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.classList.toggle('beautify');
}

对于 IE v6-9（不支持，并且您不想使用 polyfills）：classList

var elem = document.getElementById('some-id');

// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';

elem.setAttribute('class', classList);

要更改类，可以使用以下功能：

HTML格式：

<button id="myButton">Click me</button>

Javascript的：

const button = document.getElementById('myButton');

button.onclick = function() {
  button.classList.add('newClass');
};

CSS：

.newClass {
    background-color: red;
    color: white;
  }