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

Question

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

Answer 1

用于更改类的现代 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 方法是使用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 事件属性中编写 JavaScript（例如onclick="this.className+=' MyClass'" ），这不是推荐的行为。 特别是在较大的应用程序中，通过将 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').toggleClass('MyClass');

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

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

### 使用 jQuery 为单击事件分配一个函数：

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

或者，不需要 id：

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

Answer 2

你也可以这样做：

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

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

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

Answer 3

在我没有使用 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 肯定会更好。

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

Answer 7

这对我有用：

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

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

Answer 8

您也可以扩展 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');
}

这是演示。

Answer 9

只是为了添加来自另一个流行框架 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)

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

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

Answer 10

对之前的正则表达式的一些小说明和调整：

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

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

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

Answer 11

在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

Answer 12

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

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

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

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

Answer 13

线

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

应该：

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

Answer 14

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

您可以尝试使用节点attributes属性来保持与旧浏览器，甚至 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>

Answer 15

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

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

Answer 16

这是一个用于在元素上切换/添加/删除类的 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 。

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

Answer 17

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

Answer 18

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 方法。

Answer 19

选项。

这里有一些样式与 classList 的例子，让你看看你有哪些可用的选项以及如何使用classList来做你想做的事。

`style`与类`classList`

之间的区别style和classList是与style您要添加的元素的样式属性，但classList是有点控制元件（的类（ES） add ， remove ， toggle ， contain ），我会告诉你如何使用add和remove方法，因为它们是流行的方法。

样式示例

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

Answer 20

尝试：

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>

Answer 21

好的，我认为在这种情况下您应该使用 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');

Answer 22

`classList` DOM API：

添加和删除类的一种非常方便的方式是classList DOM 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>

Answer 23

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

Answer 24

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属性从元素中获取所有类并使用替换方法并用空字符串替换所需的类，最后将其分配给元素的className属性。
```
 function removeClass() { let element = document.getElementById('id1'); // removing class element.className = element.className.replace('class1', ''); }
```

3.检查类

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

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

Answer 25

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

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

Answer 26

只需使用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>

Answer 27

特尔；博士：

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

或者

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

就是这样。

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

笔记：

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

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

Answer 28

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)

Answer 29

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 元素的类名

Answer 30

简单地说，可以对元素执行 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>

Answer 31

您可以使用.classList.add('calss')添加新类

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

您还可以使用.classList.remove('calss')删除类

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

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

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

Answer 32

const actions =  document.getElementById("Element");
actions.classList.toggle("Class"); //toggle = remove or add your classes

Answer 33

你可以只做document.getElementById("MyElement").className = " MyClass"; 作为点击。

Answer 34

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

Answer 35

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

Answer 36

document.getElementById("element").className = "class"; 会换班！

Answer 37

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

Answer 38

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

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

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

Answer 39

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

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

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

但是通常您只需要更改一个或两个属性即可轻松实现：

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

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

问题描述

33 个解决方案

解决方案1 4246 已采纳 2008-10-12 20:45:36

用于更改类的现代 HTML5 技术

简单的跨浏览器解决方案

要更改元素的所有类：

向元素添加额外的类：

从元素中删除类：

要检查类是否已应用于元素：

JavaScript 框架和库

使用 jQuery 更改类：

解决方案2 453 2011-08-05 17:44:12

解决方案3 131 2011-05-28 07:32:53

解决方案4 87 2008-10-12 20:33:06

解决方案5 57 2012-01-05 19:14:01

解决方案6 55 2011-09-20 15:26:08

解决方案7 38 2011-12-08 09:36:57

解决方案8 25 2013-04-11 10:13:36

解决方案9 22 2011-11-26 21:04:12

解决方案10 19 2012-05-02 04:59:17

解决方案11 18 2011-05-28 07:19:25

解决方案12 16 2012-05-05 02:46:22

解决方案13 15 2009-12-08 22:15:12

解决方案14 14 2015-11-04 17:57:07

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

解决方案15 11 2012-10-17 12:21:20

解决方案16 11 2015-10-28 07:00:21

解决方案17 9 2014-01-18 09:28:05

解决方案18 6 2020-05-03 23:05:38

解决方案19 5 2019-08-22 18:28:29

选项。

style与类classList

样式示例

类列表示例

删除class-b

添加class-c

解决方案20 4 2019-04-14 10:51:42

解决方案21 3 2017-05-29 13:29:53

解决方案22 3 2018-09-21 09:23:12

classList DOM API：

例子：

解决方案23 3 2019-02-06 14:02:57

解决方案24 3 2021-09-05 04:50:25

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

1.添加类

2.删除类

3.检查类

4. 切换类

解决方案25 2 2015-03-20 02:35:01

解决方案26 2 2017-04-21 02:50:51

解决方案27 2 2019-02-22 10:22:35

解决方案28 2 2019-09-04 15:32:07

解决方案29 2 2020-03-20 12:25:24

解决方案30 2 2021-03-26 13:43:16

解决方案31 1 2021-05-01 12:17:04

解决方案32 0 2021-07-08 13:25:40

解决方案33 0 2021-07-10 15:24:07

解决方案34 0 2021-09-10 11:57:28

解决方案35 -1 2016-01-05 18:49:21

解决方案36 -1 2021-11-14 22:04:40

解决方案37 -3 2014-04-06 06:10:14

解决方案38 -21 2008-10-12 20:12:16

解决方案39 -59 2008-10-12 20:16:33

解决方案1
4246 已采纳 2008-10-12 20:45:36

解决方案2
453 2011-08-05 17:44:12

解决方案3
131 2011-05-28 07:32:53

解决方案4
87 2008-10-12 20:33:06

解决方案5
57 2012-01-05 19:14:01

解决方案6
55 2011-09-20 15:26:08

解决方案7
38 2011-12-08 09:36:57

解决方案8
25 2013-04-11 10:13:36

解决方案9
22 2011-11-26 21:04:12

解决方案10
19 2012-05-02 04:59:17

解决方案11
18 2011-05-28 07:19:25

解决方案12
16 2012-05-05 02:46:22

解决方案13
15 2009-12-08 22:15:12

解决方案14
14 2015-11-04 17:57:07

解决方案15
11 2012-10-17 12:21:20

解决方案16
11 2015-10-28 07:00:21

解决方案17
9 2014-01-18 09:28:05

解决方案18
6 2020-05-03 23:05:38

解决方案19
5 2019-08-22 18:28:29

`style`与类`classList`

删除`class-b`

添加`class-c`

解决方案20
4 2019-04-14 10:51:42

解决方案21
3 2017-05-29 13:29:53

解决方案22
3 2018-09-21 09:23:12

`classList` DOM API：

解决方案23
3 2019-02-06 14:02:57

解决方案24
3 2021-09-05 04:50:25

解决方案25
2 2015-03-20 02:35:01

解决方案26
2 2017-04-21 02:50:51

解决方案27
2 2019-02-22 10:22:35

解决方案28
2 2019-09-04 15:32:07

解决方案29
2 2020-03-20 12:25:24

解决方案30
2 2021-03-26 13:43:16

解决方案31
1 2021-05-01 12:17:04

解决方案32
0 2021-07-08 13:25:40

解决方案33
0 2021-07-10 15:24:07

解决方案34
0 2021-09-10 11:57:28

解决方案35
-1 2016-01-05 18:49:21

解决方案36
-1 2021-11-14 22:04:40

解决方案37
-3 2014-04-06 06:10:14

解决方案38
-21 2008-10-12 20:12:16

解决方案39
-59 2008-10-12 20:16:33