js判断样式className同时增加class或删除class

 更新时间:2013年01月30日 11:57:11   作者:  
用正则表达式判断多个class之间是否存在真正的class(前后空格的处理)然后增加class删除class,本文给予实现方法,感兴趣的朋友可以了解下,或许对你有所帮助
复制代码 代码如下:

function MyClass () {}
MyClass.hasClassName = function(element, className)
{
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0) return false;
//用正则表达式判断多个class之间是否存在真正的class(前后空格的处理)
if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
return true;
return false;
};
MyClass.addClassName = function(element, className)
{
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0)
{
element.className = elementClassName;
return;
}
if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
return;
element.className = elementClassName + " " + className;
};
MyClass.removeClassName = function(element, className)
{
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0) return;
if(elementClassName == className)
{
element.className = "";
return;
}
if (elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
element.className = elementClassName.replace((new RegExp("(^|\\s)" + className + "(\\s|$)"))," ");
};

相关文章

  • JavaScript第一篇之实现按钮全选、功能

    JavaScript第一篇之实现按钮全选、功能

    这篇文章主要介绍了JavaScript第一篇之实现按钮全选、功能的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 微信小程序实现联动选择器

    微信小程序实现联动选择器

    这篇文章主要为大家详细介绍了微信小程序实现联动选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • 如何利用JavaScript实现二叉搜索树

    如何利用JavaScript实现二叉搜索树

    这篇文章主要给大家介绍了关于如何利用JavaScript实现二叉搜索树的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 基于js中document.cookie全面解析

    基于js中document.cookie全面解析

    下面小编就为大家带来一篇基于js中document.cookie全面解析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • uniapp实现支付功能

    uniapp实现支付功能

    本文主要介绍了uniapp实现支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 微信小程序里长按识别二维码的实现过程

    微信小程序里长按识别二维码的实现过程

    这篇文章主要给大家介绍了关于微信小程序里长按识别二维码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 使用Echart实现绘制立体的柱状图

    使用Echart实现绘制立体的柱状图

    EChart开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。本文将利用EChart绘制立体的柱状图,感兴趣的可以学习一下
    2022-03-03
  • 微信小程序实现走马灯式抽奖

    微信小程序实现走马灯式抽奖

    这篇文章主要为大家详细介绍了微信小程序实现走马灯式抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Javascript实现视频文件播放功能(示例详解)

    Javascript实现视频文件播放功能(示例详解)

    这篇文章主要介绍了Javascript实现视频文件播放功能,使用CSS完成相应的布局样式,利用JavaScript函数来监听进度条,然后使用鼠标点击按钮实现对视频的播放,需要的朋友可以参考下
    2023-10-10
  • js运算精度丢失的2个解决方法

    js运算精度丢失的2个解决方法

    近期在做项目的时候,遇到了一些JS浮点数精度的问题,这个问题其实说大不大,说小不小,下面这篇文章主要给大家介绍了关于js运算精度丢失的2个解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06

最新评论