原生JS实现addClass,removeClass,toggleClass
来源:互联网 发布:中国2016年cpi数据 编辑:程序博客网 时间:2024/05/19 22:57
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>
- 原生JS实现addClass,removeClass,toggleClass
- 原生JS实现addClass,removeClass,toggleClass
- 原生js实现addClass、removeClass、toggleClass
- 原生JS实现addClass,removeClass,toggleClass
- js实现css、addClass、removeClass和toggleClass
- js实现css、addClass、removeClass和toggleClass
- JS原生addClass、removeClass实现
- 原生JS实现addClass,removeClass,toggleClass ,附:类似jquery hover事件
- 超有用!原生JS实现增加删除class(addClass,removeClass,toggleClass)
- 原生js 实现addclass和removeclass
- 原生js实现addClass,removeClass,hasClass方法
- 原生JS addClass removeClass hasClass
- js实现addClass,removeClass
- 用原生js实现addClass,removeClass,hasClass方法
- 仿jQuery原生js实现----hasClass,removeClass,addClass
- jquery中的addClass(),removeClass(),toggleClass()
- .addClass(),.removeClass(),.toggleClass()的区别
- js原生扩展addClass,removeClass,hasClass
- 转换成javascript时间格式,并计算时间差
- java开发中select下拉列表在查询操作中保留查询条件问题
- missing ';' before 'namesapce'错误的解决
- mahout
- ASP.NET数据库连接字符串总结
- 原生JS实现addClass,removeClass,toggleClass
- Linux下shell与子shell及执行Script的几种方式
- 中国2014年成最大机器人市场 工厂迈向自动化
- ios菜鸟之路:UIView简单的动画
- 批量去掉文件夹中的.svn文件
- mac客户端界面卡顿问题的一个可能原因
- UML-----关系
- day1--2012.10.12
- Fragment(二)-----分析执行的过程篇