原生JavaScript实现addClass与removeClass函数封装详解

作者:代码拾荒时间:2026-10-22 09:44:42浏览:452

本文提供原生JavaScript封装的添加与删除CSS类名函数实例。通过split和splice方法处理类名数组,自动去除多余空格并去重,实现简洁的DOM样式控制功能。

原生JavaScript封装添加与删除类名功能

首先介绍如何封装添加CSS类名的功能。


function addClass(ele,cName) {
 var arr = ele.className.split(' ').concat(cName.split(" "));
 for(var i=0;i<arr.length;i++){
  for(var k=arr.length-1;k>i;k--){
   (arr[k]==="")&&arr.splice(k,1);
   (arr[i]===arr[k])&&arr.splice(k,1);
  }
 }
 ele.className = arr.join(" ");
}

接着演示如何封装删除CSS类名的功能。


function removeClass(ele,cName) {
 var arr1 = ele.className.split(' ');
 var arr2 = cName.split(" ");
 for(var i=0;i<arr2.length;i++)for(var j=arr1.length-1;j>=0;j--)(arr2[i]===arr1[j])&&arr1.splice(j,1)
 ele.className = arr1.join(" ")
}

上述实现中尚未处理类名间的空格问题,若该方案对您有所启发,我将深感欣慰。

以上就是原生JavaScript封装添加与删除类名功能的完整分享,希望能为读者提供实用参考,并感谢大家的支持。

作者最新文章