zoukankan      html  css  js  c++  java
  • 修改多CLASS的标签

    虽然用obj.style.className可以直接修改标签所属的类名,但是还是有限制的,比如说,这个标签有多个class的时候,就比较不适用了:

     1 .pd10{padding:10px;} 2 .mg10{margin:10px;} 

    结构如下:

     1 <div class="pd10 mg10"></div> 

    如果我们想把.pd10这个类删掉,用style.className就不适用了

    在几次的百度之后,我找到了一种方法,就是用正则匹配,然后选出要删除或者是修改的class

    1、先判断标签中是否有该类

    1 function hasClass( elements,sClass){ 
    2 return !!elements.className.match( new RegExp( "(\s|^)" + sClass+ "(\s|$)") ); // ( \s|^ ) 判断前面是否有空格 (\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 
    3 }; 

    2、定义添加css类函数

    1 function addClass(ele,sClass){
    2   if(!hasClass(ele,sClass){
    3     ele.className += " " + sClass;
    4   };
    5 }

    这里是判断是否有sClass这个类,没有,就加上,用+=,而不用=

    3、定义删除CSS类函数

    function removeClass(ele,sClass){
      if(hasClass(ele,sClass)){
        elements.className = elements.className.replace( new RegExp( "(\s|^)" + sClass + "(\s|$)","");
      };
    };

    用replace函数,把要删除的函数替换成空的字符串

  • 相关阅读:
    jquery弹出窗口
    js定时器
    jquery树形菜单
    用convert转换参数对比
    jquery常用例子!
    JS总结
    上传简历实现只浏览不下载的效果
    区块链入门(1):搭建(Ubuntu系统)Truffle v3.2.1 开发和测试环境
    URL Routing组件是如何与ASP.NET MVC框架组合起来的
    接单网站收集
  • 原文地址:https://www.cnblogs.com/fyima/p/3684782.html
Copyright © 2011-2022 走看看