原生JS实现addClass,removeClass,toggleClass

关注

原创最新推荐文章于 2026-06-05 11:46:55 发布 10w+ 阅读 AI 写同款· GEO 优化 ›

原生js实现addClass,removeClass和toggleClass 综述 Jquerys实现class的add,remove和toggle是十分方便的。而H5新增的classList方法，也让原生js的各种class操作变得方便起来。然而，兼容性来了，classList只兼容IE10及以上（这里只提IE吧，IE是前端过不去的兼容坎），因此十分想方便的用原生js，又纠结在了兼容性上，干脆，那就自己来实现一下吧，都给它扔进去，兼容的就classList，不兼容的就用... 阅读详情

jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.

在此写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

<style type="text/css">
	div.testClass{
		background-color:gray;
	}
</style>

<script type="text/javascript">
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}

function toggleClass(obj,cls){
	if(hasClass(obj,cls)){
		removeClass(obj, cls);
	}else{
		addClass(obj, cls);
	}
}

function toggleClassTest(){
	var obj = document. getElementById('test');
	toggleClass(obj,"testClass");
}
</script>

<body>
	<div id = "test" style = "width:250px;height:100px;">
		sssssssssssss
	</div>
	<input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />
</body>

收录于