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

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

判断元素是否有某个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

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

相关推荐

发表评论 0