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

如何使用JavaScript更改超文本标记语言元素的类以响应onclick或任何其他事件？

3263577 次浏览
小开

使用像jQuery这样的库最简单：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />
<script>function test_byid(){$("#second").toggleClass("highlight");}</script>
小开

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

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

永远不要在飞行中更改类名称！-）

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

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

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

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

这应该在Internet Explorer 5.5和PPK中工作。

小开
最佳答案

用于更改类的现代HTML5技术

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

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方法是使用#0，这就是下面的示例所使用的-您当然可以通过其他方式获取元素，并且在正确的情况下可以简单地使用this-但是，详细讨论这超出了答案的范围。

要更改元素的所有类：

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

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

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

向元素添加一个额外的类：

要向元素添加类，而不删除/影响现有值，请附加一个空格和新的类名，如下所示：

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

从元素中删除一个类：

要在不影响其他潜在类的情况下将单个类删除到元素中，需要一个简单的regex替换：

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

这个regex的解释如下：

(?:^|\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标志告诉替换根据需要重复，以防类名已添加多次。

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

上面用于删除类的相同regex也可以用作检查特定类是否存在：

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

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

虽然可以直接在超文本标记语言事件属性（例如onclick="this.className+=' MyClass'"）中编写JavaScript，但这不是推荐的行为。特别是在较大的应用程序中，通过将超文本标记语言与JavaScript交互逻辑分离来实现更易于维护的代码。

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

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

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

第二步是将onClick事件从超文本标记语言移到JavaScript中，例如使用添加消息监听器

<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部分，以便执行该函数的内容之后超文本标记语言已完成加载-如果没有这个，调用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);

小开

这条线

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.LoadIf Not Page.IsPostBack ThenlbSave.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 IfEnd 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闭包的信息，请参阅它们的创建类类：

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某种元素的元素时调用的函数。如果元素的class属性还不是它的一部分，该函数会将点击附加到元素的class属性中，如果它存在，则将其删除。

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

小开

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

function addHTMLClass(item, classname) {var obj = itemif (typeof item=="string") {obj = document.getElementById(item)}obj.className += " " + classname}
function removeHTMLClass(item, classname) {var obj = itemif (typeof item=="string") {obj = document.getElementById(item)}var classes = ""+obj.classNamewhile (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');}

这里是demo。

小开

我在代码中使用以下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.class列表。

小开

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

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

这里，

  • Class1是事件的侦听器。
  • 父类是承载您要更改的类的类
  • 你拥有的类是旧类。
  • 要添加的类是您要添加的新类。
  • 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 theClassfunction 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 allif (add) elem.className += ' ' + theClass;}

见的jsfiddle。

另请参阅我的答案这里，以动态创建一个新类。

小开

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

小开

只需使用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编写的，所以你需要确保你的浏览器支持它，或者你使用类似巴别塔的东西，否则需要在你的代码中使用ES5语法。同样，我们通过ID找到元素，这意味着元素需要有一个ID才能被选择：

// Simple JavaScript utilities for class management in ES6var 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');
小开

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>

We can observe in the log that we are getting back an object with not only the classes of the element, but also many auxiliary methods and properties. This object inherits from the interface DOMTokenList, an interface which is used in the DOM to represent a set of space separated tokens (like classes).

Example:

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 omnisiste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam, eaque ipsa quae ab illo inventore veritatis etquasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsamvoluptatem 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>

小开

太长别读：

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

或

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

就是这样

而且，如果你真的想知道为什么并教育自己，那么我建议阅读Peter Boughton的回答。这是完美的。

备注：

这可能是（文档或事件）：

  • 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来做你想做的事情。

#0 vs#1

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

样式示例

如果你想将margin-top 属性添加到元素中，你会这样做：

// Get the Elementconst el = document.querySelector('#element');
// Add CSS propertyel.style.margintop = "0px"el.style.margintop = "25px" // This would add a 25px to the top of the element.

示例列表

假设我们有一个<div class="class-a class-b">，在这种情况下，我们已经在div元素中添加了2个类，class-a和class-b，我们想控制#3的类和#4的类。这就是classList变得方便的地方。

删除class-b

// Get the Elementconst el = document.querySelector('#element');
// Remove class-b style from the elementel.classList.remove("class-b")

添加class-c

// Get the Elementconst el = document.querySelector('#element');
// Add class-b style from the elementel.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_nameelse if (!add_class) el.className = el.className.replace(re, '');}

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

添加类：

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

删除类：

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

JavaScript中有一个属性班级名称用于更改超文本标记语言元素的类的名称。现有的类值将被替换为您在class Name中分配的新值。

<!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中更改超文本标记语言元素的类名

小开

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

现代浏览器允许您这样做用一行JavaScript：

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

classList属性提供了一个DOMTokenList，它具有各种方法。您可以使用add（）、删除或替换（）等简单操作对元素的类列表进行操作。或者使用key（）、值（）和条目（）进行非常复杂的操作，就像使用对象或Map一样操作类。

https://caniuse.com/#search=classList96038">Peter Boughton的回答是一个很棒的，但它现在已经超过十年了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=classList甚至Internet Explorer 11支持一些DOMTokenList方法。

小开

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

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

1. 增加班级

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

  • Case 1 : 添加单个类

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


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

  • Case 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';
}
  • Case 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 = '';
}
  • Case 2 : 删除多个类 如果元素有多个类，则首先使用 className属性从元素中获取所有类，然后使用替换方法并用空字符串替换所需的类，最后将其分配给元素]的 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.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(其中不支持 classList，也不想使用 polyfill) :

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);
小开 
 document.getElementById("MyTest").classList.add('TestClass');

提交答案