原生JS實現(xiàn)hasClass,addClass,removeClass

hearaway 發(fā)布于2019-08-19 18:03 / 3309人閱讀

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

function addClass(obj, cls){
    var obj_class = obj.className,//獲取 class 內(nèi)容.
    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 內(nèi)容, 并在首尾各加一個空格. 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 內(nèi)容.
    obj_class_lst = obj_class.split(/s+/);//通過split空字符將cls轉換成數(shù)組.
    x = 0;
    for(x in obj_class_lst) {
        if(obj_class_lst[x] == cls) {//循環(huán)數(shù)組, 判斷是否包含cls
            return true;
        }
    }
    return false;
}

GPU云服務器云服務器原生js實現(xiàn)addclass 原生js實現(xiàn) ajax原生js實現(xiàn) 原生js實現(xiàn)ajax

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

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

原生JavaScript實現(xiàn)hasClass、addClass、removeClass、toggle

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

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

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

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

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

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

摘要：實現(xiàn)方法方法有判斷是否存在類名，返回值添加類名從列表中刪除類名切換類名如果列表中存在則刪除，否則添加 js 實現(xiàn) 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