用原生js实现addClass，hasClass,removeClass

最新推荐文章于 2021-01-31 22:08:56 发布

guoxiaxing

最新推荐文章于 2021-01-31 22:08:56 发布

阅读量573

点赞数

分类专栏： Javascript 文章标签： js类操作

本文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/86632987

版权

Javascript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
	<div class="top bottom left" id="test"></div>
	<script>
		function hasClass(ele,cls) {
		    var classStr = ele.className;
		    var classNames = classStr.split(/\s+/);
		    var len = classNames.length;
		    for(var i=0;i<len;i++) {
		        if(classNames[i] === cls) {
		            return true;
				}
			}
			return false;
		}
		function addClass(ele,cls) {
		    var oldClass = ele.className;
		    var blank = oldClass != ''?' ':'';
		    if(!hasClass(ele,cls)){
                        var newClass = oldClass + blank + cls;
                        ele.className = newClass;
                    }
		}
		function removeClass(ele,cls) {
		    if(hasClass(ele,cls)){
		       var classNames = ele.className.split(/\s+/);
		       ele.className = classNames.filter(function(item){
		           return item !== cls;
			   }).join(' ');
			}
		}
		var test = document.getElementById('test');
		console.log(hasClass(test,'top'));
		addClass(test,'right');
		removeClass(test,'bottom');
	</script>
</body>
</html>

guoxiaxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生js实现addClass，hasClass,removeClass

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
复制链接

扫一扫

专栏目录