原生javascript实现addClass,removeClass,hasClass函数

原生JavaScript实现addClass、removeClass和hasClass功能详解

在不依赖jQuery的情况下，我们可以使用原生JavaScript实现这三个常用的类操作函数：addClass、removeClass和hasClass。以下是具体的实现方法。

我们来看hasClass函数。这个函数用于检查一个元素是否含有某个特定的类。实现方式是通过正则表达式匹配元素的className属性。

接着是addClass函数。这个函数用于向元素添加一个新的类。在添加类之前，我们先使用hasClass函数检查该元素是否已经包含了这个类，如果没有，我们才把新的类添加到元素的className属性中。

我们来看removeClass函数。这个函数用于从元素中删除一个已存在的类。我们首先使用hasClass函数检查这个类是否存在，如果存在，我们就用正则表达式替换掉这个类，从而实现了删除类的功能。

以下是具体的代码实现：

```javascript

function hasClass(ele, cls) {

return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

}

function addClass(ele, cls) {

if (!hasClass(ele, cls)) {

ele.className += " " + cls;

}

}

function removeClass(ele, cls) {

if (hasClass(ele, cls)) {

var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

ele.className = ele.className.replace(reg, ' ');

}

}

// 使用示例：

var testElement = document.getElementById("test");

addClass(testElement, "testClass"); // 添加类

removeClass(testElement, "testClass"); // 删除类

if (hasClass(testElement, "testClass")) { // 检查类是否存在，如果存在则执行某些操作

// do something

}

```

以上代码实现了原生JavaScript的addClass、removeClass和hasClass功能，无需依赖任何外部库，可以直接在项目中应用。希望这篇文章对你有所帮助，如果有任何疑问，欢迎随时提问。记得在实际项目中使用这些函数时，要确保传入的元素和类名都是有效的。