使用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;
}
您可能感兴趣的文章:
- jQuery使用addClass()方法给元素添加多个class样式
- jQuery中addClass()方法用法实例
- Jquery.addClass始终无效原因分析
- jQuery源码解读之addClass()方法分析
- jQuery中removeClass()方法用法实例
- jQuery使用removeClass方法删除元素指定Class的方法
- jQuery源码解读之removeClass()方法分析
- jQuery中toggleClass()方法用法实例
- jQuery使用toggleClass方法动态添加删除Class样式的方法
- 用jQuery toggleClass 实现鼠标移上变色
- JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
相关文章
JavaScript setinterval延迟一秒解决方案
这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
最新评论