原生JS实现hasClass,addClass,removeClass

hearaway 发布于2019-08-19 18:03 / 3306人阅读

摘要：获取内容判断获取到的是否为空如果不为空在前面加个空格组合原来的和需要添加的替换原来的获取内容并在首尾各加一个空格将多余的空字符替换成一个空格在原来的替换掉首尾加了空格的去掉首尾空格替换原来的获取内容通过空字符将转换成数组循环数组判断

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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