原生javascript添加和删除css类名

一、classList的add()和remove()方法

css样式
 .new{
        color: #FFD113;
    }
html标签

    <span class="old">首页</span>
js代码
    var arr = document.getElementsByTagName("span");
    arr[i].classList.add("new"); /*添加样式*/
    arr[j].classList.remove("new");/*删除样式*/

二、字符串拼接 className

    var old= element.className;
    /*加上空格, 不然想查询"old",若原本有"older"的类名的就会有问题*/
    old = " " + old + " ";
    
    /*查询类名中是否含有某个class*/
    old.indexOf(" ClassName ") === -1 ? false : true;//同样的查询时也要带上空格*2
    
    /*增加*/
    1.  new=old+" new";//注意空格*1
    
    2.  new = old.concat(" ClassName");//注意空格*1
        element.setAttribute("class", new);
    
    /*删除*/
    new = old.replace(" ClassName "," ");//注意空格*3
    element.setAttribute("class",new);
    
    /*修改*/
    new = old.replace(" targetClassName "," yourClassName ");//注意空格*4
    element.setAttribute("class",new );


上一篇:Manifesto – HTML5 离线应用程序缓存校验工具


下一篇:Repeater简单不同数量显示