本文提供原生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封装添加与删除类名功能的完整分享,希望能为读者提供实用参考,并感谢大家的支持。