原生JS實現hasClass,addClass,removeClass

hearaway 發布于2019-08-19 18:03 / 3305人閱讀

摘要：獲取內容判斷獲取到的是否為空如果不為空在前面加個空格組合原來的和需要添加的替換原來的獲取內容并在首尾各加一個空格將多余的空字符替換成一個空格在原來的替換掉首尾加了空格的去掉首尾空格替換原來的獲取內容通過空字符將轉換成數組循環數組判斷

function addClass(obj, cls){
    var obj_class = obj.className,//獲取 class 內容.
    blank = (obj_class != "") ? " " : "";//判斷獲取到的 class 是否為空, 如果不為空在前面加個"空格".
    added = obj_class + blank + cls;//組合原來的 class 和需要添加的 class.
    obj.className = added;//替換原來的 class.
}
 
function removeClass(obj, cls){
    var obj_class = " "+obj.className+" ";//獲取 class 內容, 并在首尾各加一個空格. ex) "abc        bcd" -> " abc        bcd "
    obj_class = obj_class.replace(/(s+)/gi, " "),//將多余的空字符替換成一個空格. ex) " abc        bcd " -> " abc bcd "
    removed = obj_class.replace(" "+cls+" ", " ");//在原來的 class 替換掉首尾加了空格的 class. ex) " abc bcd " -> "bcd "
    removed = removed.replace(/(^s+)|(s+$)/g, "");//去掉首尾空格. ex) "bcd " -> "bcd"
    obj.className = removed;//替換原來的 class.
}
 
function hasClass(obj, cls){
    var obj_class = obj.className,//獲取 class 內容.
    obj_class_lst = obj_class.split(/s+/);//通過split空字符將cls轉換成數組.
    x = 0;
    for(x in obj_class_lst) {
        if(obj_class_lst[x] == cls) {//循環數組, 判斷是否包含cls
            return true;
        }
    }
    return false;
}

云服務器 GPU云服務器原生js實現addclass 原生js實現 ajax原生js實現原生js實現ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79144.html

原生JavaScript實現hasClass、addClass、removeClass、toggle

摘要：兼容，因不支持和，分別用實現支持。支持明細代碼讓低版本支持讓低版本支持支持實現方式修復不規范傳參是否有必要判斷不支持實現方式完整代碼修復不規范傳參支持是否有必要判斷使用項目兼容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分別用Polyfill實現支持。詳細： index...

brianway 2019-08-20 10:21 評論0 收藏0
classList介紹和原生JavaScript實現addClass、removeClass等

摘要：使用可以給元素很方便的添加和刪除等操作，現在原生的也可以實現這個方法了。刪除指定的類值。所以目前來看，還是無法在實際中放心的使用，只能用于某些特定的項目等。不過我們可以通過一些來實現，或者最下方給出的原生實現。使用jQuery可以給元素很方便的添加class和刪除class等操作，現在原生的JavaScript也可以實現這個方法了。使用classList可以方便的添加class、刪除...

geekzhou 2019-08-26 18:18 評論0 收藏0
jQuery 源碼系列（十八）class 相關操作

摘要：眼看的源碼就快到頭了，后面還有幾個重要的內容，包括和動畫操作，加油把它們看完，百度前端學院的新一批課程也開始了。，當第二個參數為的情況，就是，為時，，從源碼來看，就是直接調用的這兩個函數。參考源碼分析樣式操作本文在上的源碼地址，歡迎來。歡迎來我的專欄查看系列文章。眼看 jQuery 的源碼就快到頭了，后面還有幾個重要的內容，包括 ajax 和動畫操作，加油把它們看完，百度前端學院的...

BingqiChen 2019-08-21 11:32 評論0 收藏0
js 實現 hasClass(), addClass(), removeClass() 方法

摘要：實現方法方法有判斷是否存在類名，返回值添加類名從列表中刪除類名切換類名如果列表中存在則刪除，否則添加 js 實現 hasClass(), addClass(), removeClass() 方法 HTML5-classList classList 方法有 contains(className) // 判斷是否存在類名，返回Boolean值 add(className) /...

sydMobile 2019-08-23 14:01 評論0 收藏0
放棄jQuery, 使用原生js

摘要：隨著的逐漸淘汰，的興起，以及側重點放在了移動端，可能變的不在那么重要，原生一樣很好用。下面介紹幾個原生替換的方法。隨著IE6、7、8的逐漸淘汰，HTML5的興起，以及側重點放在了移動端，jQuery可能變的不在那么重要，原生一樣很好用。下面介紹幾個原生替換jq的方法。獲取元素 //jQuery $(.xxx); //class獲取 $(#xxx); //id獲取 $(....

mumumu 2019-08-23 14:27 評論0 收藏0