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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐