井井客

搜索

原生JS操作class类

原生JS操作class类,即JS实现hasClass、addClass、removeClass、toggleClass,不想用JQ的时候就可以用这几个代替。

原生JS操作class类

整体的代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS操作class类</title>
<style>
#test { width:100%; height:400px; line-height:1.5em; text-align:center; }
.sty01 { background:red; }
.sty02 { color:#f30; }
.sty03 { font-size:30px;}
#btn { text-align:center; width:400px; line-height:60px; background:#f2f2f2; margin:0 auto; cursor:pointer;}
</style>
</head>
<body>
<div id="test" class="sty01">sty01:红色背景<br>sty02:红色字体<br>sty03:30号字体</div>
<div id="btn">点击为test添加或删除sty03</div>
<script>
//获取DOM元素
var testId = document.getElementById('test');
var btn = document.getElementById('btn');
//判断样式是否存在
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
//为指定的DOM元素添加样式
function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) {
        obj.className += " " + cls;
    }
}
//删除指定DOM元素的样式
function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}
//指定DOM元素,为它添加/删除样式
function toggleClass(obj,cls){
    if(hasClass(obj,cls)){
        removeClass(obj, cls);
    } else {
        addClass(obj, cls);
    }
}


//测试-添加样式
addClass(testId,'sty02');
//测试-判断是否存在
if(hasClass(testId,'sty02')){
	//测试-删除sty01样式
	removeClass(testId,'sty01');
}
//测试为test添加删除样式sty03
btn.onclick = function(){
	toggleClass(testId,'sty03');
}
</script>
</body>
</html>

核心就是hasClass、addClass、removeClass、toggleClass四个函数。

希望文章对你有帮助~

文章TAG:JS

作者:井井客整理来源:互联网
本文标题:原生JS操作class类
本文链接:/c/21205.html

上一篇:JS判断页面是否是在微信中打开的
下一篇:JQ判断元素是否处于animate动画状态

文章分类

相关阅读

随便看看