本文主要是介绍通过Js更改元素标签类名，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
通过JS代码更改html等语言的元素标签的类名
前言
在写html等前端页面时，我们会用到各种标签元素，配合js代码可以实现验证、变化等效果。在JS的编写中，我们有三种方法可以改变元素的类名，如下。
1、setAttribute()
setAttribute()方法是创建或者改变元素的某个属性，我们可以利用这个方法对元素的类名进行更改。具体方法是这样的 el.setAttribute(“class”,“classname”)
<div id="box"></div>
<script>document.getElementById("box").setAttribute('class','box')//<div id="box" class="box"></div>
</script>
需要注意的是，这个方法只兼容IE8+及其他浏览器，那IE7及以下的需要怎么处理呢？
方法还是通过setAttribute()，只不过属性名需改为“className”，具体的方法是这样的el.setAttribute(“className”,“classname”)
<div id="box"></div>
<script>document.getElementById("box").setAttribute('className','box')//<div id="box" class="box"></div>
</script>
2、className
className可以兼容所有的浏览器，具体的方法是这样的 el.className=“classname”
<div id="box"></div>
<script>document.getElementById("box").className="box"//<div id="box" class="box"></div>
</script>
3、classList
classList属性是只读的，不能通过直接赋值来进行修改元素的类名，但是可以通过add()、remove()和toggle()方法对classList进行修改。
具体使用方法如下
//el是对元素的对象引用
//添加一个或多个类名
el.classList.add("class1");
el.classList.add("class1","class2"...);//删除一个或多个类名
el.classList.remove("class1");
el.classList.remove("class1","class2"...);//切换元素类名
el.classList.toggle("classname")//判断元素是否含有某个类名，如果有返回true，否则返回false
el.classList.contains("classname")
参考：
https://www.jianshu.com/p/a34e65a8c23a
这篇关于通过Js更改元素标签类名的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
