如何用原生JS添加和删除class类名

文章2019-09-1179 人已阅来源:网络

如何用原生JS添加和删除class类名?有3种常用的方法。

以下方代码为例:

<!-- html结构 -->
<div id="tonjay" class="classOld">用JS添加和删除class类名</div>
//元素及class属性获取
var ele = document.getElementById("tonjay");

方法一

var classVal = ele.getAttribute("class");

// 添加classNew(需要注意下面js中classNew前需要加个空格 )
ele.setAttribute("class",classVal.concat(" classNew"));

// 删除classOld
ele.setAttribute("class",classVal.replace("classOld",""))

方法二

//添加classNew
ele.classList.add("classNew");

// 删除classOld
ele.classList.remove("classOld");

方法三

// 添加classNew
ele.className += " classNew";

// 删除classOld
ele.className = "";