使用JS实现jQuery的addClass, removeClass, hasClass函数功能

 更新时间:2014年10月31日 10:35:12   投稿:hebedich  
这篇文章主要介绍了使用JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下

废话不多说,直接上代码

复制代码 代码如下:

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;
}

相关文章

  • 前端开发之CSS原理详解

    前端开发之CSS原理详解

    这篇文章主要介绍了前端开发之CSS原理详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • 判断数组是否包含某个元素的js函数实现方法

    判断数组是否包含某个元素的js函数实现方法

    下面小编就为大家带来一篇判断数组是否包含某个元素的js函数实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS及PHP代码编写八大排序算法

    JS及PHP代码编写八大排序算法

    这篇文章主要为大家详细介绍了JS及PHP代码编写八大排序算法的相关资料,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • javascript 使td内容不换行不撑开

    javascript 使td内容不换行不撑开

    javascript 使td内容不换行不撑开如何实现,本文将详细介绍,需要了解的朋友可以参考下
    2012-11-11
  • 微信小程序checkbox组件使用详解

    微信小程序checkbox组件使用详解

    这篇文章主要介绍了微信小程序checkbox组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 微信小程序实现拍照和相册选取图片

    微信小程序实现拍照和相册选取图片

    这篇文章主要为大家详细介绍了微信小程序实现拍照和相册选取图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 微信小程序onShareTimeline()实现分享朋友圈

    微信小程序onShareTimeline()实现分享朋友圈

    这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • JavaScript闭包和范围实例详解

    JavaScript闭包和范围实例详解

    这篇文章主要介绍了JavaScript闭包和范围,结合实例形式详细分析了javascript闭包的使用及变量的作用范围,需要的朋友可以参考下
    2016-12-12
  • JavaScript setinterval延迟一秒解决方案

    JavaScript setinterval延迟一秒解决方案

    这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • layui 表单标签的校验方法

    layui 表单标签的校验方法

    今天小编就为大家分享一篇layui 表单标签的校验方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论