快捷導(dǎo)航

原生js封裝添加class,刪除class的實例

更新時間：2017年11月06日 10:23:22 作者：一步一步向上爬

下面小編就為大家?guī)硪黄鷍s封裝添加class,刪除class的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望對大家有所幫助

一、添加class

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(" ");
}

二、刪除class

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(" ")
}

其中還有一點空格的問題沒有解決，如果你能學(xué)到一點東西，我會非常開心。

以上這篇原生js封裝添加class,刪除class的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

性能分析:指如何快速定位SQL問題
本文介紹了如何快速定位SQL性能問題的方法,包括找出執(zhí)行時間最長的SQL、同類型并發(fā)SQL、阻塞和被阻塞SQL、鎖等待和死鎖,以及慢日志分析,需要的的朋友一起看看吧
2017-04-04
js遍歷、動態(tài)的添加數(shù)據(jù)的小例子
js遍歷、動態(tài)的添加數(shù)據(jù)的小例子，需要的朋友可以參考一下
2013-06-06
ES6基礎(chǔ)之默認參數(shù)值
這篇文章主要介紹了ES6基礎(chǔ)之默認參數(shù)值，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
Javascript排序算法之計數(shù)排序的實例
計數(shù)排序是一種高效的線性排序，它通過計算一個集合中元素楚翔的次數(shù)來確定集合如何排列，計數(shù)排序不需要進行數(shù)據(jù)的比較，所有他的運行效率前面介紹的都高
2014-04-04
不要在cookie中使用特殊字符的原因分析
參數(shù)name需要遵循規(guī)范RFC2109，也就是說name參數(shù)只能包含字母或者數(shù)字，不能包含逗號、分號、空格及美元符號。cookie的name屬性設(shè)置之后不能被修改。
2010-07-07
JS判斷表單輸入是否為空(示例代碼)
本篇文章主要是對JS判斷表單輸入是否為空的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
JavaScript在圖片繪制文字兩種方法的實現(xiàn)與對比
這篇文章主要為大家詳細介紹了前端實現(xiàn)在圖片上繪制文字的兩種思路,支持即粘即貼即用,文中的示例代碼講解詳細,需要的小伙伴可以了解下
2024-03-03
nuxt中使用路由守衛(wèi)的方法步驟
這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
按給定幾率進行隨機抽取的js代碼
沒啥技術(shù)含量的隨機抽取，需要的朋友可以參考下。
2010-12-12
mui開發(fā)中獲取單選按鈕、復(fù)選框的值(實例講解)
下面小編就為大家?guī)硪黄猰ui開發(fā)中獲取單選按鈕、復(fù)選框的值(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07