javascript - 如何使用 JavaScript 更改元素的类？

Question

如何更改 HTML 元素的类以响应onclick使用 JavaScript 的事件或任何其他事件？

score 4323 · Accepted Answer

用于更改类的现代 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 中不起作用，尽管有一个shim可以为 IE8 和 IE9 添加对它的支持，可以从这个页面获得。不过，它得到了越来越多的支持。

简单的跨浏览器解决方案

选择元素的标准 JavaScript 方式是 using 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)/) )

### 将这些操作分配给 onclick 事件：

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

实现这一点的第一步是创建一个函数，并在 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进行了复制，这可能是最常用的 JavaScript 库（尽管还有其他值得研究的库）。

（注意$这里是 jQuery 对象。）

使用 jQuery 更改类：

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

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

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

此外，jQuery 提供了一个快捷方式来添加一个不适用的类，或者删除一个适用的类：

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

### 使用 jQuery 将函数分配给单击事件：

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

或者，不需要 id：

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

score 461 · Accepted Answer

你也可以这样做：

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

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

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

score 137 · Accepted Answer

在我的一个不使用 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 会更好。

score 92 · Accepted Answer

你可以node.className这样使用：

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

根据PPK ，这应该在Internet Explorer 5.5及更高版本中工作。

score 57 · Accepted Answer

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

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

score 56 · Accepted Answer

使用纯 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);
    }
}

score 38 · Accepted Answer

这对我有用：

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

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

score 26 · Accepted Answer

您也可以扩展 HTMLElement 对象，以添加方法来添加、删除、切换和检查类 ( gist )：

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');
}

这是演示。

score 23 · Accepted Answer

只是添加来自另一个流行框架的信息，谷歌闭包，查看他们的dom/classes类：

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

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

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

选择元素的一种方法是使用带有 CSS 3 选择器的goog.dom.query ：

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

score 20 · Accepted Answer

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

如果类列表中的类名不止一次，您需要在全局范围内执行此操作。而且，您可能希望从类列表的末尾去除空格并将多个空格转换为一个空格，以防止出现空格。如果使用类名的唯一代码使用下面的正则表达式并在添加之前删除名称，那么这些事情都不会成为问题。但。好吧，谁知道谁可能会在班级名单上大吃一惊。

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

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, ' ') + "]");

score 20 · Accepted Answer

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

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

1.添加类

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

案例1：添加单个类

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

  // adding class
  element.classList.add('beautify');
}

案例2：添加多个类

add()在方法中通过逗号添加多个类

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

  // adding multiple class
  element.classList.add('class1', 'class2', 'class3');
}

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

案例 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 - 您也可以使用className方法删除类。

案例 1：删除单个类如果元素只有 1 个类并且您想删除它，那么只需为该className方法分配一个空字符串。
```
function removeClass() {
  let element = document.getElementById('id1');

  // removing class
  element.className = '';
}
```
案例2：删除多个类如果元素有多个类，首先使用className属性从元素中获取所有类，然后使用replace方法并用空字符串替换所需的类，最后将其分配给元素的className属性。
```
function removeClass() {
  let element = document.getElementById('id1');

  // removing class
  element.className = element.className.replace('class1', '');
}
```

3.检查类

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

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

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

4.切换类

切换类使用classList.toggle()方法。

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

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

参考：今晚教程

score 19 · Accepted Answer

在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

score 17 · Accepted Answer

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

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

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

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

score 16 · Accepted Answer

线

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

应该：

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

score 15 · Accepted Answer

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

您可以尝试使用 nodeattributes属性来保持与旧浏览器的兼容性，甚至 Internet Explorer 6：

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>

score 12 · Accepted Answer

这是我的版本，可以正常工作：

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")' >

score 12 · Accepted Answer

这是一个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。

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

score 10 · Accepted Answer

我在我的代码中使用了以下 vanilla 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 。

score 7 · Accepted Answer

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

现代浏览器允许你用一行 JavaScript做到这一点：

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

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

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

score 5 · Accepted Answer

尝试：

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>

score 5 · Accepted Answer

选项。

这是一个小样式与 classList 示例，可让您了解可用的选项以及如何使用classList它们来做您想做的事情。

`style`对比`classList`

style和之间的区别在于classList，style您正在添加元素的样式属性，但classList有点控制元素的类（add, remove, toggle, contain），我将向您展示如何使用addandremove方法，因为那些是流行的。

样式示例

如果您想将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.

类列表示例

假设我们有一个<div class="class-a class-b">，在这种情况下，我们已经将 2 个类添加到我们的 div 元素中，class-a并且class-b我们想要控制哪些类remove和哪些类add。这是classList变得方便的地方。

消除`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")

score 4 · Accepted Answer

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

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);

score 3 · Accepted Answer

好的，我认为在这种情况下你应该使用 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”。确保将它们作为字符串传递。您可以使用该实用程序，如下所示：

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

score 3 · Accepted Answer

`classList`DOM API：

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

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>

score 3 · Accepted Answer

是的，有很多方法可以做到这一点。在 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>

score 2 · Accepted Answer

只是想我会把这个扔进去：

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(' ');
}

score 2 · Accepted Answer

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>

score 2 · Accepted Answer

TL;博士：

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

或者

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

就是这样。

而且，如果您真的想知道原因并进行自我教育，那么我建议您阅读Peter Boughton 的回答。这是完美的。

笔记：

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

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

score 2 · Accepted Answer

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)

score 2 · Accepted Answer

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>

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

score 2 · Accepted Answer

简单地说，可以对元素执行 3 种不同的操作：

添加一个新类
删除旧类
切换类（如果类是然后删除它；如果类不是然后添加）

但是在这里，您只对添加新类和删除旧类感兴趣。

有两种方法可以做到这一点：

使用元素的 classList 属性的 add 和 remove 方法。element.classList.add(class_name)与element.classList.remove(old_class_name). 它将添加新类并删除旧类。

完整代码

function changeClass() {
    const element = document.getElementById("id1");
    element.classList.add("new-class");
    element.classList.remove("old-class");
}

.old-class { background: lightpink }
.new-class { background: lightgreen }

<div class="old-class" id="id1">My div element.</div>
<button onclick="changeClass()">Change class</button>

使用元素的 className 属性。element.className = new_class. 这将替换元素的所有旧类。

function changeClass() {
    const element = document.getElementById("id1");
    element.className = "new-class";
}

.old-class { background: lightpink }
.new-class { background: lightgreen }

<div class="old-class" id="id1">My div element.</div>
<button onclick="changeClass()">Change class</button>

score -5 · Accepted Answer

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

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

这里，

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

score -27 · Accepted Answer

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

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

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

score -69 · Accepted Answer

无意冒犯，但动态更改类是不明智的，因为它会迫使 CSS 解释器重新计算整个网页的视觉呈现。

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

永远不要即时更改 className ！-)

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

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