如何使用 JavaScript 更改元素的类？
Posted
技术标签:
【中文标题】如何使用 JavaScript 更改元素的类？【英文标题】：How can I change an element's class with JavaScript? 【发布时间】：2010-09-16 19:02:38 【问题描述】：如何更改 html 元素的类以响应 onclick 或使用 javascript 的任何其他事件？
【问题讨论】：
"class 属性主要用于指向样式表中的类。但是，JavaScript 也可以使用它（通过 HTML DOM）以指定的方式更改 HTML 元素班级。” -w3schools.com/tags/att_standard_class.aspelement.setAttribute(name, value); 将name 替换为class。将 value 替换为您为该类指定的任何名称，并用引号括起来。这避免了需要删除当前类并添加不同的类。这个jsFiddle example 显示了完整的工作代码。
要使用 onClick 更改 HTML 元素类，请使用以下代码：<input type='button' onclick='addNewClass(this)' value='Create' /> 和 javascript 部分：function addNewClass(elem) elem.className="newClass"; Online
@Triynko - w3schools 上的链接已更改，看起来像是在 2012 年 9 月。这是 Archive.org 上 2012 年 9 月 12 日的页面：HTML class Attribute-w3schools。这是 w3schools.com 上替换页面的链接：HTML class Attribute-w3schools。
@ImanBahrampour 这将消除任何现有的类。
【参考方案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 的支持，可从 this page 获得。不过，supported 越来越多。
简单的跨浏览器解决方案
选择元素的标准 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（例如 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').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
此外，jQuery 提供了一个快捷方式，用于添加不适用的类，或删除适用的类：
$('#MyElement').toggleClass('MyClass');
$('#MyElement').click(changeClass);
或者，不需要 id：
$(':button:contains(My Button)').click(changeClass);
【讨论】：
很好的回答彼得。一个问题...为什么使用 JQuery 比使用 Javascript 更好？ JQuery 很棒，但如果这就是您需要做的全部 - 包含整个 JQuery 库而不是几行 JavaScript 的理由是什么？ @mattstuehler 1) 短语“better yet x”经常的意思是“better yet (you can) x”。 2) 为了解决问题的核心，jQuery 旨在帮助访问/操作 DOM，而且通常如果你需要在整个地方都做这种事情。 此解决方案的一个错误：当您多次单击按钮时，它将多次将“MyClass”的类添加到元素中，而不是检查它是否已经存在。因此，您最终可能会得到一个看起来像这样的 HTML 类属性：class="button MyClass MyClass MyClass"
如果你试图删除一个类'myClass'并且你有一个类'prefix-myClass'，你上面给出的删除类的正则表达式会在你的className中留下'prefix-' :O
哇，三年和 183 次投票，直到现在没人发现。感谢 jinglesthula，我已经更正了正则表达式，因此它不会错误地删除部分类名。 // 我想这是一个很好的例子，说明为什么框架（如 jQuery）值得使用 - 像这样的错误会很快被捕获和修复，并且不需要更改普通代码。【参考方案2】：
你也可以这样做：
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
并切换一个类（如果存在则删除，否则添加它）：
document.getElementById('id').classList.toggle('class');
【讨论】：
我相信这是 HTML5 依赖的。 你需要 Eli Grey 的classList shim。
Mozilla Developer Network 声明它在小于 10 的 Internet Explorer 中本机不起作用。在我的测试中，我发现该声明是正确的。显然，Internet Explorer 8-9 需要Eli Grey shim。不幸的是，我在他的网站上找不到它（即使搜索）。垫片可在 Mozilla 链接上找到。
Here's the MDN Documentation for classList.
atow "classList" 在 IE10+ 中有部分支持；不支持 Opera Mini；其他标准浏览器完全支持：caniuse.com/#search=classlist【参考方案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 会更好。
【讨论】：
当您的客户端不允许您使用 jQuery 时，这非常有用。 （因为你最终几乎要建立自己的图书馆。） @Mike 如果客户端不让你使用 jQuery，你能不能只把你需要的特性重新构建到你自己的库中？ @kfrncs 因为我通常不需要那么大的框架。对于我正在考虑的项目，我需要的唯一函数是 3 个类名（has、add、remove）函数和 cookie（has、add、remove）函数。其他一切要么是定制的，要么是原生支持的。所以所有东西在缩小之前只有 150 行，包括 cmets。 这是我最喜欢的解决方案。我到处都用它。当您的项目还没有其他方法时，我相信这是实现添加和删除类的最优雅的方法。 需要注意的是，在同一个元素上使用addClass和removeClass后，元素的className会包含一个额外的空格。 removeClass 的 className 修改行应更新为 ele.className = ele.className.replace(reg, ' ').trim().replace(/\s2,/g, ' ');。这将删除剩余的尾随空格并将多个空格折叠到 className 中的单个空格中。【参考方案4】：
你可以像这样使用node.className：
document.getElementById('foo').className = 'bar';
这应该在Internet Explorer 5.5 及以上根据PPK 工作。
【讨论】：
这将覆盖对象上的任何和所有其他类......所以它不是那么简单。【参考方案5】：哇，奇怪这里有这么多矫枉过正的答案......
<div class="firstClass" onclick="this.className='secondClass'">
【讨论】：
我会说不显眼的 javascript 是编写示例代码的糟糕做法...... 我不同意，因为我认为示例代码应该是一个很好的例子。 一个好的例子应该同时启发和激发想象力。它不应该取代思想，而应该激发它。 其他答案并不过分，它们还保留了元素上的现有类。【参考方案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);
【讨论】：
【参考方案7】：这对我有用：
function setCSS(eleID)
var currTabElem = document.getElementById(eleID);
currTabElem.setAttribute("class", "some_class_name");
currTabElem.setAttribute("className", "some_class_name");
【讨论】：
优秀的答案！只需添加：为选择器设置每个CSS类名称以指定一组类元素的样式 这在 FF 上对我有用，但是当我尝试使用 el.className = "newStyle";它没有工作，为什么？ 您可以使用el.setAttribute('class', newClass) 或更好的el.className = newClass。但不是el.setAttribute('className', newClass)。【参考方案8】：
您也可以扩展 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');
这里是demo。
【讨论】：
这个有点冗长...这里有一个非常简洁的解决方案...jsfiddle.net/jdniki/UaT3P 对不起@Jackson_Sandland 但你完全错过了重点，那就是根本不使用jQuery。【参考方案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)
选择元素的一个选项是使用 goog.dom.query 和 CSS 3 选择器：
var myElement = goog.dom.query("#MyElement")[0];
【讨论】：
【参考方案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, ' ') + "]");
【讨论】：
【参考方案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
【讨论】：
【参考方案12】：我会使用 jQuery 并编写如下内容：
jQuery(function($)
$("#some-element").click(function()
$(this).toggleClass("clicked");
);
);
这段代码添加了一个函数，当点击一个id为some-element的元素时调用。该函数将 clicked 附加到元素的 class 属性（如果它还不是它的一部分），如果它存在则将其删除。
是的，您确实需要在您的页面中添加对 jQuery 库的引用才能使用此代码，但至少您可以确信该库中的大多数功能几乎可以在所有现代浏览器上运行，并且它会为您节省时间来实现自己的代码来做同样的事情。
【讨论】：
您只需将jQuery 写成长格式一次。 jQuery(function($) ); 使 $ 在所有情况下都可以在函数内部使用。【参考方案13】：
线
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
应该是：
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
【讨论】：
不正确。 RegEx 由正斜杠分隔。添加引号会导致它在 IE 中失败，返回您尝试删除的类的字符串，而不是实际删除该类。【参考方案14】：在支持 Internet Explorer 6 的原生 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>【讨论】：
【参考方案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")' >
【讨论】：
如果您尝试删除课程foo，这将破坏课程foobar。内部事件处理程序属性中的 JS 在被编辑之前被破坏。 4 岁接受的答案要好得多。
谢谢，我修好了（不是前缀问题）。这是旧的公认答案，正则表达式存在错误。
代码还是有foobar的问题。见测试here【参考方案16】：
这是一个切换/添加/删除元素上的类的切换类：
// 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;
见the JSFiddle。
另请参阅我的回答 here 以动态创建新类。
【讨论】：
【参考方案17】：可能有 4 种操作：添加、删除、检查和切换
让我们看看每个动作的更多方式。
1。 Add class
方法一：在现代浏览器中添加类的最佳方式是使用元素的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 元素添加类。
className 属性时，它会覆盖以前的类。
function addClass()
let element = document.getElementById('id1');
// adding multiple class
element.className = 'beautify';
+= 运算符不要覆盖以前的类。还要在新课前添加一个额外的空间。
function addClass()
let element = document.getElementById('id1');
// adding single multiple class
element.className += ' beautify';
// adding multiple classes
element.className += ' class1 class2 class3';
2。 Remove class
方法 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 方法删除类。
className 方法分配一个空字符串。
function removeClass()
let element = document.getElementById('id1');
// removing class
element.className = '';
className 属性从元素中获取所有类并使用replace method 并用空字符串替换所需的类，最后将其分配给元素的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');
【讨论】：
【参考方案18】：我在我的代码中使用了以下原生 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。
【讨论】：
【参考方案19】：OP 的问题是如何使用 JavaScript 更改元素的类？
现代浏览器允许您使用一行 JavaScript：
document.getElementById('id').classList.replace('span1', 'span2')
classList 属性提供了一个具有variety of methods 的 DOMTokenList。您可以使用 add()、remove() 或 replace() 等简单操作对元素的 classList 进行操作。或者像使用 keys()、values() 和 entries() 的对象或 Map 一样获得非常复杂和操作类。
Peter Boughton's answer 是一个很棒的，但它现在已经有十多年的历史了。所有现代浏览器现在都支持 DOMTokenList - 请参阅 https://caniuse.com/#search=classList 甚至 Internet Explorer 11 支持一些 DOMTokenList 方法。
【讨论】：
【参考方案20】：选项。
这里有一个小样式与 classList 示例，让您了解您有哪些可用选项以及如何使用 classList 来做您想做的事情。
style 与 classList
style 和 classList 之间的区别在于 style 是添加到元素的样式属性中，但 classList 有点控制元素的类（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">，在这种情况下，我们已经向 div 元素添加了 2 个类，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")
【讨论】：
【参考方案21】：试试：
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>【讨论】：
【参考方案22】：对于 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);
【讨论】：
【参考方案23】：好的，我认为在这种情况下，您应该使用 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');
【讨论】：
【参考方案24】：
classListDOM 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>【讨论】：
【参考方案25】：是的，有很多方法可以做到这一点。在 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>【讨论】：
“使用此代码切换添加和删除类”是什么意思。？似乎难以理解。例如，是否缺少一些标点符号？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。【参考方案26】：只是想我会把这个扔进去：
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(' ');
【讨论】：
【参考方案27】：只需使用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>【讨论】：
【参考方案28】：TL;DR：
document.getElementById('id').className = 'class'
或
document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');
就是这样。
而且，如果您真的想知道原因并自学，那么我建议您阅读Peter Boughton's answer。很完美。
注意：
这可以通过 (document 或 event)：
getElementById()
getElementsByClassName()
querySelector()
querySelectorAll()
【讨论】：
【参考方案29】：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's answer，这是一个简单的跨浏览器添加和删除类的功能。
添加类：
classed(document.getElementById("denis"), "active", true)
删除类：
classed(document.getElementById("denis"), "active", false)
【讨论】：
【参考方案30】：在 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>
信用 - How To Change Class Name of an HTML Element in JavaScript
【讨论】：
以上是关于如何使用 JavaScript 更改元素的类？的主要内容，如果未能解决你的问题，请参考以下文章