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

Question

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

Answer 1

用于改变类的现代HTML5技术

现代浏览器增加了类列表它提供了一些方法，使操作类更容易，而不需要库：

document.getElementById（“MyElement”）.classList.add（“MyClass”）；document.getElementById（“MyElement”）.classList.remove（“MyClass”）；if（document.getElementById（“MyElement”）.classList.contents（“MyClass”））document.getElementById（“MyElement”）.classList.togle（“MyClass”）；

不幸的是，这些在v10之前的Internet Explorer中不起作用，尽管有一个垫片添加对IE8和IE9的支持，可从本页。尽管如此，它正在变得越来越多支持.

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById（“Id”），这就是下面的示例所使用的-您当然可以通过其他方式获取元素，在适当的情况下可以简单地使用这然而，详细讨论这一点超出了答案的范围。

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

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

document.getElementById（“MyElement”）.className=“MyClass”；

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

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

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

document.getElementById（“MyElement”）.className+=“MyClass”；

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

要将单个类删除到元素中，而不影响其他潜在类，需要使用简单的正则表达式替换：

document.getElementById（“MyElement”）.className=document.getElementById（“MyElement”）.className.replace（/（？：^|\s）我的类（？！\s）/g，''）/*为了可读性而包装的代码-以上都是一个语句*/

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

（？：^|\s）#匹配字符串的开头或任何单个空白字符MyClass#要删除的类名的文本（？！\S）#反向向前看，以验证以上是整个类名#确保后面没有非空格字符#（即必须是字符串或空格的末尾）

这个克标记告诉replace根据需要重复，以防类名被多次添加。

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

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

if（document.getElementById（“MyElement”）.className.match（/（？：^|\s）MyClass（？！\s）/））

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

虽然可以直接在HTML事件属性（例如onClick=“this.className+='MyClass'”)这不是推荐的行为。特别是在较大的应用程序上，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易于维护的代码。

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

<script type=“text/javascript”>函数changeClass（）{//上面的代码示例}</script>...<button onClick=“changeClass（）”>我的按钮

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

第二步是将onClick事件移出HTML并移入JavaScript，例如使用添加事件侦听器

<script type=“text/javascript”>函数changeClass（）{//上面的代码示例}window.onload=函数（）{document.getElementById（“MyElement”）.addEventListener（'click'，changeClass）；}</script>...我的按钮

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

JavaScript框架和库

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

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

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

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

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

使用jQuery更改类：

$（'#MyElement'）.addClass（'MyClass'）；$（'#MyElement'）.removeClass（'MyClass'）；if（$（'#MyElement'）.hasClass（'MyClass'））

此外，jQuery提供了一种快捷方式，可以在类不适用时添加类，或者删除具有以下功能的类：

$（'#MyElement'）.toggleClass（'MyClass'）；

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

$（“#MyElement”）点击（changeClass）；

或者，不需要id：

$（'：button:contains（My button）'）点击（changeClass）；

Answer 2

你也可以这样做：

document.getElementById（'id'）.classList.add（'class'）；document.getElementById（'id'）.classList.remove（'class'）；

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

document.getElementById（'id'）.classList.togle（'class'）；

Answer 3

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

函数hasClass（ele，cls）{return ele.className.match（新RegExp（'（\\s|^）'+cls+'（\\s |$）'）；}函数addClass（ele，cls）{if（！hasClass（ele，cls））ele.className+=“”+cls；}函数删除类（ele，cls）{if（hasClass（ele，cls））{var reg=新RegExp（'（\\s|^）'+cls+'（\\s |$）'）；ele.className=ele.class名称.replace（reg，''）；}}

例如，如果我想onclick（单击）要向按钮添加类，我可以使用以下命令：

<script type=“text/javascript”>函数changeClass（btn，cls）{if（！hasClass（btn，cls））{addClass（btn，cls）；}}</script>...我的按钮

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

Answer 4

你可以使用节点.className如此：

document.getElementById（'fo'）.className='bar'；

这应该适用于Internet Explorer 5.5并根据PPK公司.

Answer 5

使用纯JavaScript代码：

函数hasClass（ele，cls）{return ele.className.match（新RegExp（'（\\s|^）'+cls+'（\\s |$）'）；}函数addClass（ele，cls）{if（！this.hasClass（ele，cls））ele.className+=“”+cls；}函数删除类（ele，cls）{if（hasClass（ele，cls））{var reg=新RegExp（'（\\s|^）'+cls+'（\\s |$）'）；ele.className=ele.class名称.replace（reg，''）；}}函数replaceClass（ele，oldClass，newClass）{if（hasClass（ele，oldClass））{removeClass（ele，oldClass）；addClass（ele，newClass）；}回报；}函数toggleClass（ele、cls1、cls2）{if（hasClass（ele，cls1））{替换类（ele，cls1，cls2）；}else if（hasClass（ele，cls2））{替换类（ele，cls2，cls1）；}其他{添加类别（ele，cls1）；}}

Answer 6

哇，很惊讶这里有这么多多余的答案。。。

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

Answer 7

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

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

1.添加类

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

• 案例1：添加单个类

  函数addClass（）{let元素=document.getElementById（'id1'）；//添加类element.classList.add（'beautify'）；}

• 案例2：添加多个类

  要添加多个类，请在添加（）方法

  函数addClass（）{let元素=document.getElementById（'id1'）；//添加多个类element.classList.add（'class1'，'class2'，'class3'）；}

方法2-您也可以使用向HTML元素添加类类名财产。

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

  函数addClass（）{let元素=document.getElementById（'id1'）；//添加多个类element.className=“美化”；}

• 案例2：添加类而不覆盖使用+=操作符用于类不覆盖以前的类。另外，在新类之前添加一个额外的空格。

  函数addClass（）{let元素=document.getElementById（'id1'）；//添加单个多个类element.className+=“美化”；//添加多个类element.className+=“class1 class2 class3”；}

---

2.删除类

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

• 案例1：删除单个类

  只需传递要从方法中的元素中移除的类名。

  函数removeClass（）{let元素=document.getElementById（'id1'）；//删除类element.classList.remove（'beautify'）；}

• 案例2：删除多个类

  传递由逗号分隔的多个类。

  函数removeClass（）{let元素=document.getElementById（'id1'）；//删除类element.classList.remove（'class1'，'class2'，'classis3'）；}

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

• 案例1：删除单个类如果元素只有1个类，并且您想删除它，那么只需将一个空字符串分配给类名方法。

  函数removeClass（）{let元素=document.getElementById（'id1'）；//删除类element.className=“”；}

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

  函数removeClass（）{let元素=document.getElementById（'id1'）；//删除类element.className=元素.className.replace（'class1'，''）；}

---

3.检查等级

要检查元素中是否存在类，只需使用classList.contains（）方法。它会返回真实的如果类存在，则返回false。

函数checkClass（）{let元素=document.getElementById（'id1'）；//检查类if（element.classList.contains（'beautify'）{alert（“是！类存在”）；}}

---

4.切换类

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

函数toggleClass（）{let元素=document.getElementById（'id1'）；//切换类element.classList.togle（'beautify'）；}

Answer 8

这对我很有效：

函数集CSS（elemID）{var currTabElem=文档.getElementById（元素ID）；currTabElem.setAttribute（“类”，“some_class_name”）；currTabElem.setAttribute（“类名称”，“some_class_name”）；}

Answer 9

您还可以扩展HTMLElement对象，以便添加方法来添加、删除、切换和检查类(主旨):

HTMLElement=类型（HTMLElement）！='没有定义？HTMLElement：元素；HTMLElement.prototype.addClass=函数（字符串）{if（！（数组的字符串实例））{string=string.split（''）；}对于（var i=0，len=字符串长度；i<len；++i）{if（string[i]&&！new RegExp（'（\\s+|^）'+string[i]+'（\\s+|$）'）.test（this.className））{this.className=this.classesName.trim（）+“”+字符串[i]；}}}HTMLElement.prototype.removeClass=函数（字符串）{if（！（数组的字符串实例））{string=string.split（''）；}对于（var i=0，len=字符串长度；i<len；++i）{this.className=this.classeName.replace（新RegExp（'（\\s+|^）'+string[i]+'（\\s+|$）'），'）.trim（）；}}HTMLElement.prototype.toggleClass=函数（字符串）{if（字符串）{if（新RegExp（'（\\s+|^）'+string+'（\\s+|$）'）.test（this.className））{this.className=this.classeName.replace（新RegExp（'（\\s+|^）'+string+'（\\s+|$）'），'）.trim（）；}其他{this.className=this.classesName.trim（）+“”+字符串；}}}HTMLElement.prototype.hasClass=函数（字符串）{返回字符串&&new RegExp（'（\\s+|^）'+string+'（\\s+|$）'）.test（this.className）；}

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

document.getElementById（'yourElementId'）.onclick=function（）{this.toggleClass（'active'）；}

这里是演示.

Answer 10

只需添加来自另一个流行框架GoogleClosures的信息，请参阅他们的dom/类类别：

goog.dom.classes.add（元素，var_args）goog.dom.classes.addRemove（元素，类ToRemove，类ToAdd）goog.dom.classes.remove（元素，var_args）

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

var myElement=goog.dom.query（“#myElement”）[0]；

Answer 11

在中使用JavaScript更改元素的CSS类ASP。净值:

受保护的子页面加载（ByVal sender As Object，ByVal e As System.EventArgs）处理Me.Load如果不是第页。IsPostBack然后lbSave（保存）。属性。添加（“onmouseover”，“this.className='LinkButtonStyle1'”）lbSave（保存）。属性。添加（“onmouseout”，“this.className='LinkButtonStyle'”）lb取消。属性。添加（“onmouseover”，“this.className='LinkButtonStyle1'”）lb取消。属性。添加（“onmouseout”，“this.className='LinkButtonStyle'”）End If（结束条件）结束Sub

Answer 12

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

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

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

var s=“testing one four one two”；var cls=“一”；var rg=新RegExp（“（^|\\s+）”+cls+“（\\s+|$）”，'ig'）；警报（“[”+s.replace（rg，''）+“]”）；var cls=“测试”；var rg=新RegExp（“（^|\\s+）”+cls+“（\\s+|$）”，'ig'）；警报（“[”+s.replace（rg，''）+“]”）；var cls=“测试”；var rg=新RegExp（“（^|\\s+）”+cls+“（\\s+|$）”，'ig'）；警报（“[”+s.replace（rg，''）+“]”）；var cls=“tWo”；var rg=新RegExp（“（^|\\s+）”+cls+“（\\s+|$）”，'ig'）；警报（“[”+s.replace（rg，''）+“]”）；

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

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

jQuery（函数（$）{$（“#some-element”）点击（function（）{$（this）.toggleClass（“点击”）；});});

此代码添加了一个函数，当id的元素某些元素单击。函数追加单击如果元素的class属性还不是它的一部分，则将其删除。

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

Answer 15

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

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

函数getClassNode（元素）{for（var i=元素属性长度；i--；）if（element.attributes[i].nodeName==='class'）return element.attributes[i]；}函数removeClass（classNode，className）{var index，classList=classNode.value.split（''）；if（（index=classList.indexOf（className））>-1）{classList.拼接（索引，1）；classNode.value=classList.join（“”）；}}函数hasClass（classNode，className）{return classNode.value.indexOf（className）>-1；}函数addClass（classNode，className）{if（！hasClass（classNode，className））classNode.value+=“”+类名称；}document.getElementById（'message'）.addEventListener（'click'，function（）{var classNode=获取类节点（this）；var className=hasClass（classNode，'red'）&&'blue'||'red'；removeClass（classNode，'red'）；removeClass（classNode，'blue'）；addClass（classNode，className）；})

.红色{颜色：红色；}.红色：之前{content:“我是红色的！”；}.红色：之后{content:'再次'；}.蓝色{颜色：蓝色；}.蓝色：之前{内容：“我是蓝色的！”}

单击我</span>

Answer 16

这是我的版本，完全有效：

函数addHTMLClass（item，classname）{var obj=项目if（项目类型=“字符串”）{obj=文档.getElementById（项）}obj.className+=“”+类名}函数removeHTMLClass（item，classname）{var obj=项目if（项目类型==“字符串”）{obj=文档.getElementById（项）}var classes=“”+对象.classNamewhile（classes.indexOf（classname）>-1）{classes=classes.replace（类名，“”）}obj.className=类}

用法：

<tr onmouseover='addHTMLClass（this，“clsSelected”）'onmouseout='removeHTMLClass（this，“clsSelected”）'>

Answer 17

这里有一个toggleClass用于切换/添加/删除元素上的类：

//如果提供newState，则相应地添加/删除Class，否则切换Class函数toggleClass（elem，theClass，newState）{var matchRegExp=新RegExp（'（？：^|\\s）'+theClass+'（？！\\s）'，'g'）；var add=（arguments.length>2？newState:（elem.className.match（matchRegExp）==null））；elem.className=elem.classesName.replace（matchRegExp，''）；//全部清除if（add）elem.className+=“”+类；}

请参见JSFiddle.

另请参阅我的答案在这里用于动态创建新类。

Answer 18

我在代码中使用了以下普通JavaScript函数。他们使用正则表达式和索引属于但不需要在正则表达式中引用特殊字符。

函数addClass（el，cn）{var c0=（“”+el.className+“”）.replace（/\s+/g，“”），c1=（“”+cn+“”）.替换（/\s+/g，“”）；如果（c0.indexOf（c1）<0）{el.className=（c0+c1）.replace（/\s+/g，“”）.replay（/^|$/g，“”；}}函数delClass（el，cn）{var c0=（“”+el.className+“”）.replace（/\s+/g，“”），c1=（“”+cn+“”）.替换（/\s+/g，“”）；如果（c0.indexOf（c1）>=0）{el.className=c0.replace（c1，“”）.replace（/\s+/g，“”；}}

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

Answer 19

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

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

document.getElementById（'id'）.classList.replace（'span1'，'span2'）

这个类列表属性提供一个DOMTokenList，该列表具有各种方法。可以使用以下简单操作操作元素的classList添加（）,删除（）或替换（）。或者变得非常复杂并像处理对象或Map那样操作类按键（）,值（）、和条目（）.

彼得·布顿的回答这是一个伟大的作品，但它已经有十多年的历史了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=类列表甚至Internet Explorer 11支持一些DOMTokenList方法。

Answer 20

---

选项。

下面是一个小的style与classList示例，让您了解可以使用的选项以及如何使用类列表做你想做的事。

风格与。类列表

两者之间的差异风格和类列表是用的吗风格您正在添加元素的样式属性，但是类列表有点控制元素的类(添加,去除,切换,包含)，我将向您演示如何使用添加和去除方法，因为这些是流行的方法。

---

样式示例

如果要添加边缘顶部属性添加到元素中，您可以这样做：

//获取元素const el=document.querySelector（“#element”）；//添加CSS属性el.style.margintop=“0px”el.style.margintop=“25px”//这将在元素顶部添加一个25px。

---

classList示例

假设我们有一个<div class=“class-a class-b”>，在本例中，我们已经在div元素中添加了两个类，a类和乙类放大，我们想控制哪些类去除上什么课添加。这就是类列表变得很方便。

删除乙类放大

//获取元素const el=document.querySelector（“#element”）；//从元素中删除class-b样式el.classList.remove（“class-b”）

添加c类

//获取元素const el=document.querySelector（“#element”）；//从元素添加class-b样式el.classList.add（“class-c”）

---

Answer 21

尝试：

element.className=“秒”

函数更改（box）{box.className='second'}

.first{宽度：70px；高度：70px；背景：#ff0}第二个{宽度：150px；高度：150px；背景：#f00；过渡：1s}

单击我

Answer 22

对于IE v6-9（其中类列表不支持，并且您不希望使用polyfill）：

var elem=文档.getElementById（'some-id'）；//不要忘记类名前的额外空格var classList=elem.getAttribute（'class'）+'other-class-name'；elem.setAttribute（'class'，classList）；

Answer 23

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

我想在我的JavaScript框架中添加一些像下面这样的方法，以添加一些处理添加类、删除类等的功能。与jQuery类似，IE9+完全支持这一点。此外，我的代码是用ES6编写的，所以您需要确保您的浏览器支持它，或者您使用类似的东西巴别塔，否则需要在代码中使用ES5语法。同样，我们通过ID查找元素，这意味着元素需要具有要选择的ID：

//用于ES6中类管理的简单JavaScript实用程序var类实用程序={addClass:（id，cl）=>{document.getElementById（id）.classList.add（cl）；},删除类：（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.togle（cl）；}}

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

classUtil.addClass（'myId'，'myClass'）；classUtil.removeClass（'myId'，'myClass'）；classUtil.hasClass（'myId'，'myClass'）；classUtil.toggleClass（'myId'，'myClass'）；

Answer 24

类列表DOM API：

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

const el=document.getElementById（“main”）；console.log（el.classList）；

<div class=“content-wrapper animated”id=“main”></div>

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

例子：

const el=document.getElementById（“容器”）；函数addClass（）{el.classList.add（'newclass'）；}函数replaceClass（）{el.classList.replace（'foo'，'newFoo'）；}函数removeClass（）{el.classList.remove（'bar'）；}

按钮{边距：20px；}.foo文件{颜色：红色；}.newFoo（新Foo）{颜色：蓝色；}.巴{背景色：粉末蓝；}.newclass（新类）{边框：2px纯绿色；}

<div class=“foo bar”id=“container”>“全身出汗iste natus error sit volutitem accusantium doloremque audantium，托塔姆·雷姆·阿皮里亚姆（totam rem aperiam）、埃克·伊萨·奎阿比略（eaque ipsa quae ab illo inventore veritatis）等准建筑师beatae vitae dicte sunt explicabo。尼莫·埃尼姆·伊萨姆卷目的要求卷</div>添加类替换类<button onclick=“removeClass（）”>removeClass</button>

Answer 25

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

const tabs=document.querySelectorAll（'.menu li'）；for（让选项卡中的选项卡）{tab.onclick=函数（）{let activetab=document.querySelectorAll（'li.active'）；activetab[0].classList.remove（'active'）tab.classList.add（'active'）；}}

车身{填充：20px；font-family：无衬线；}ul公司{边距：20px 0；列表样式：无；}李{背景：#dfdfdf；填充：10px；边距：6px 0；光标：指针；}li.活动{背景：#2794c7；font-weight：粗体；颜色：#ffffff；}

<i> 请单击项目：</i><ul class=“menu”><li class=“active”><span>三个</span></li><li><span>两个</span></li><li>一个</li></ul>

Answer 26

我只是想把这个扔进去：

数组中的函数（val，ary）{对于（var i=0，l=ary.length；i<l；i++）{if（ary[i]===val）{返回true；}}返回false；}函数removeClassName（classNameS，fromElement）{var x=classNameS.split（/\s/），s=fromElement.className.split（/\s/），r=[]；对于（var i=0，l=s.长度；i<l；i++）{如果（！iA（s[i]，x））r.push（s[i]）；}fromElement.className=r.join（“”）；}函数addClassName（classNameS，toElement）{var s=toElement.className.split（/\s/）；s.push（c）；toElement.className=s.join（''）；}

Answer 27

只需使用myElement.classList=“new-class”除非您需要维护其他现有类，在这种情况下，您可以使用classList.add、.remove类方法。

var doc=文档；var divOne=doc.getElementById（“一个”）；var goButton=doc.getElementById（“go”）；goButton.addEventListener（“点击”，函数（）{divOne.classList=“蓝色”；});

div公司{最小高度：48px；最小宽度：48px；}.有边框{边框：1px纯黑色；}.绿色{背景：绿色；}.蓝色{背景：蓝色；}

<button id=“go”>更改类别<div id=“one”class=“bordered green”></div>

Answer 28

TL；博士：

document.getElementById（'id'）.className='class'

或

document.getElementById（'id'）.classList.add（'class'）；document.getElementById（'id'）.classList.remove（'class'）；

就是这样。

如果你真的想知道原因并自我教育，那么我建议你阅读彼得·布顿的回答。它是完美的。

注：

这是可能的(文件或事件):

• 按ID获取元素（）
• 按类名获取元素（）
• 查询选择器（）
• 查询选择器全部（）

Answer 29

函数classed（el，class_name，add_class）{const re=新RegExp（“（？：^|\\s）”+类名称+“（？！\\s）”，“g”）；if（add_class&&！el.className.match（re））el.class名称+=“”+类名称else if（！add_class）el.className=el.class Name.replace（re，''）；}

使用彼得·布顿的回答，这里有一个简单的跨浏览器功能来添加和删除类。

添加类：

classed（document.getElementById（“denis”），“active”，true）

删除类：

classed（document.getElementById（“denis”），“active”，false）

Answer 30

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

<!DOCTYPE html><html><头部><title>如何在JavaScript中更改HTML元素的类</标题><link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></头><body><h1 align=“center”><i class=“fa fa-home”id=“icon”></i></h1><br/><center><button id=“change-class”>更改类别</button></center><脚本>var change_class=文档.getElementById（“change-class”）；change_class.onclick=函数（）{var icon=文档.getElementById（“图标”）；icon.className=“fa fa-gear”；}</script></body></html>

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