通过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