原生js实现添加删除和查询元素的class

首先先来一个兼容性的版本

判断元素是否有某个class

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

给元素添加class,首先使用hasClass方法进行了判断

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

删除元素的一个class

function removeClass( elements,cName ){  
    if( hasClass( elements,cName ) ){  
        elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); 
        // replace方法是替换  
    };  
};

以上的三个方法最好全部作为一个组件引入,省心

我们来说说HTML5的新添加的classList属性(ie10以下就别想了)

添加方法

add(class1, class2, …) 在元素中添加一个或多个类名。

使用

document.getElementById("id").classList.add("a", "b", "c");
在dom对象上添加了三个class

如果需要把原来的全部清除,重新添加使用赋值的方法

document.getElementById("id").className = "class";

查询dom元素上是否存在class

contains(class) 返回布尔值,判断指定的类名是否存在。

document.getElementById("id").classList.contains("class");

判断一个class名,存在返回true,不存在返回false

删除class的方法

remove(class1, class2, …) 移除元素中一个或多个类名。

document.getElementById("id").remove("a","b");

清除元素上的a,b两个元素

如果需要全部清除的话,直接使用赋值的方式

document.getElementById("id").className = "";

欢迎分享本文,转载请保留出处:前端ABC » 原生js实现添加删除和查询元素的class

赞 (3)
分享到:更多 ()

发表评论 0