首页 > 代码库 > 添加和移除Class，addClass/removeClass的简单实现

添加和移除Class，addClass/removeClass的简单实现

2024-08-05 00:42:31   209人阅读

本方法是通过数组和字符串的方法实现，尚不能满足实际应用，仅供学习~~~

本方法的特点：

  • 支持无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的简单实现


联系
我们