首页 > 代码库 > 添加和移除Class，addClass/removeClass的简单实现
添加和移除Class，addClass/removeClass的简单实现
本方法是通过数组和字符串的方法实现，尚不能满足实际应用，仅供学习~~~
本方法的特点：
- 支持无class节点的class添加
- 支持已经具有单个或多个class的节点添加
- 屏蔽已经具有想同className的节点添加重复的class
- 暂时不支持一次性添加多个class
- 移除class支持单个class的节点移除
- 移除class支持多个class的节点移除单个class
- 暂时不能“完美”支持一次性移除多个class
以下是源码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>addClass</title> 6 <script> 7 window.onload = function () { 8 9 10 function addClass(obj, className) {11 if (obj.className === ‘‘) {12 obj.className = className;13 } else {14 //如果要添加的class在原有的class中不存在15 var arrClassName = obj.className.split(‘ ‘);16 if (arrIndexOf(arrClassName, className) === -1) {17 obj.className += ‘ ‘ + className;18 }19 //如果要添加的class在原有的class中存在，则不操作20 21 }22 }23 24 function removeClass(obj, className) {25 //先判断obj是不是有className26 if (obj.className != ‘‘) {27 var arrClassName = obj.className.split(‘ ‘);28 var classIndex = arrIndexOf(arrClassName, className);29 if (classIndex!==-1) {30 arrClassName.splice(classIndex, 1);31 obj.className = arrClassName.join(‘ ‘);32 }33 }34 }35 36 function arrIndexOf(arr, v) {37 for (var i = 0; i < arr.length; i++) {38 if (arr[i] == v) {39 return i;40 }41 }42 return -1;43 }44 45 function outPutClassName(infoCon,info) {46 infoCon.innerHTML = info;47 }48 49 var oDiv = document.getElementById(‘div1‘);50 var mText = document.getElementById(‘text1‘);51 var mBtn1 = document.getElementById(‘btn1‘);52 var mBtn2 = document.getElementById(‘btn2‘);53 54 mBtn1.onclick = function() {55 addClass(oDiv, mText.value);56 outPutClassName(oDiv, oDiv.className);57 };58 mBtn2.onclick = function () {59 removeClass(oDiv, mText.value);60 outPutClassName(oDiv, oDiv.className);61 };62 }63 </script>64 </head>65 <body>66 <input id="text1" type="text" value="newClass"/><input id="btn1" value="Add class" type="button"/><input id="btn2" value="RemoveClass" type="button"/>67 <p>目标元素的className：（暂时不支持单次添加多个className）</p>68 <div id="div1"></div>69 70 71 </body>72 </html>
原创文章，转载请标明出处：http://www.eyezip.com/?p=992
添加和移除Class，addClass/removeClass的简单实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。