js学习笔记20----addClass,removeClass函数封装
2017-03-01 16:17
537 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>addClassName , removeClassName</title> </head> <body> <div id="div1" class="bb"> div1 </div> <div id="div2" class="box dd bb"> div2 </div> <script type="text/javascript"> var oDiv1 = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); addClass(oDiv1 , 'box'); removeClass(oDiv2,'box'); function addClass(obj,className){ //如果原来没有class if(obj.className == ""){ obj.className = className; }else{ var _index = classIndexOf(obj,className); //如果原来没有这个新加的class if(_index == -1){ obj.className += " " + className; } } } function removeClass(obj,className){ //如果以前的元素不为空 if(obj.className != ""){ var arrClassName = obj.className.split(" "); var _index = classIndexOf(obj,className); //如果存在要删除的class if(_index != -1){ arrClassName.splice(_index,1); } obj.className = arrClassName.join(" "); } } //检验是否包含有某一个class function classIndexOf(obj,v){ var arrClassName = obj.className.split(" "); for(var i=0;i<arrClassName.length;i++){ if(arrClassName[i] == v){ return i; } } return -1; } </script> </body> </html>
相关文章推荐
- js封装addClass,removeClass函数
- 【学习】原生js学习笔记1:添加class和使input为不可用
- JS OO 学习笔记 ——JS封装使用prototype添加方法
- Js--addClass封装
- 原生js封装函数,addClass removeClass,常用tag切换
- jQuery学习笔记 - addClass()
- js面向对象编程指南学习笔记--闭包封装HTTP请求
- Vue.js学习笔记:v-bind属性绑定(class,src)
- js-权威指南学习笔记20
- Scala学习笔记20【Scala 模式匹配之case class实战】
- angularjs ng-class学习笔记
- JS学习笔记-OO疑问之封装
- Case class和Case object代码实战解析之Scala学习笔记-20
- struts2——学习笔记2 通过form表单方式或者js的方式提交请求,封装boolean值的问题
- vue.js学习笔记之绑定style样式和class列表
- js设计模式之迭代器模式学习笔记--封装简单的数组迭代器
- JS学习笔记-OO疑问之封装
- js-JavaScript高级程序设计学习笔记20
- 【学习】js学习笔记:对象的遍历和封装特性