操作元素样式类函数

判断是否存在某一个样式类名:hasClass

验证当前元素是否包含className这个样式类名

function hasClaa(curEle,className){
   //用正则匹配,左边可能是开头或一加多个空格,右边可能是结尾或一加多个空格 
     var reg=new RegExp("(^| +)"+className+"( +|$)");
     return reg.tset(curEle.className);
}

给元素增加样式类名:addClass

function addClass(curEle,className){
//为了防止className传递进来的值包含多个样式类名,把传递进来的字符串按照一到多个空格拆分成数组中的每一项
    var ary=className.replace(/^ +| +$/g,"").split(/ +/g);  //repalce先去掉首尾多个空格后在分割

   //循环数组,一项项的进行验证增加即可
    for(var i=0,len=ary.length;i<len;i++){
       var curName=ary[i];

       //判断是否存在该类名,不存在才增加
       if(!hasClass(curEle,className)){
           curEle.className+=" "+className;
       }
    }
}

移除样式类名:removeClass

function removeClass(){
//为了防止className传递进来的值包含多个样式类名,把传递进来的字符串按照一到多个空格拆分成数组中的每一项
    var ary=className.split(/ +/g);
 
//循环数组,一项项的进行验证移除即可
    for(var i=0,len=ary.length;i<len;i++){
       var curName=ary[i];

       //判断是否存在该类名,不存在才移除
       if(!hasClass(curEle,className)){
            var reg=new RegExp("(^| +)"+curName+"( +|$)","g");//全局匹配符g
            curEle.className=curEle.className.replace(reg," ");//替换成一个空格
       }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,489评论 0 44
  • jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途...
    阿r阿r阅读 673评论 0 6
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,629评论 0 11
  • 跟着项目组来非洲工作已经17个月了。对这里的生活也慢慢适应,我们跟中国工人是住在建筑基地,条件比不上国内,但好歹生...
    姑且叫大士阅读 5,363评论 0 2
  • 文 / 壹默了然 家有8岁小女,就读小学二年级,兴趣广泛无敌,学艺折腾无数。 女儿之前就读的幼儿园是民乐特色学校,...
    壹默了然阅读 461评论 4 4