zoukankan      html  css  js  c++  java
  • JS:操作样式表2 :用JS实现添加和删除一个类名的功能(addClass()和removeClass())

    var box = document.getElementById("box");

    box.id = "pox";

    将id = “box”,改为id = “pox”;

    但id = “box”依然存在,这样就不符合W3C标准。不建议使用。

    box.className = "box5"; 将会把原来的className 清除只有一个类名为box5的类。

    如果想有用className避免这种缺陷,可以写成 box.className ="box5 box6 ....",但是这种方法太过麻烦,会造成冗余,因此可以用下面的方法:

     原生的js中并没有添加/删除类这些属性或方法,为了实现这一功能,因此写出了一下两个函数:

    1.js原生的addClass()

    首先判断是否有要添加的类名:

      function hasClass(element, cName){
        return !!element.className.match(new RegExp('(\s|^)' + cName + '(\s|$)'));
      }

    判断后,如果没有则添加

      function addClass(element, cName){
        if (!hasClass(element, cName)) {
          return element.className += " " + cName;
        };

      }

    addClass(box,"box6");
    addClass(box,"box7");

    此时的addClass()添加的类并不会覆盖掉原来的类,减少了冗余。

    2.从多个类中删除一个元素 removeClass,其余类保留:

      function removeClass(element,cName){
        if (hasClass(element,cName)) {
          element.className = element.className.replace(new RegExp('(\s|^)' + cName + '(\s|$)'), " ");
        };
      }

      removeClass(box,"box6"); //test,box,box7

  • 相关阅读:
    青瓷qici
    青瓷qici
    青瓷qici
    青瓷引擎_珍膳小游戏_巧妇有好米来做煮
    2013年12月30日 星期一 谷歌、百度地图拽取
    不懂网络知识,测试工程师真的能走得很远么
    测试和开发之间的博弈--没有硝烟的战争
    docker命令每次需要sudo操作解决方案
    Ubuntu 18.04安装Docker CE + NVIDIA-Docker
    windos10下安装ubuntu18双系统
  • 原文地址:https://www.cnblogs.com/wine/p/5045446.html
Copyright © 2011-2022 走看看