原生js封装添加class,删除class的实例

SEO优化的狼蚁网站分享：原生JS封装添加和删除class的实例

在网页开发中，我们经常需要操作元素的class来更改其样式。今天，长沙网络推广为大家带来一篇关于原生JavaScript封装添加class和删除class的实例。希望这个例子能给大家带来一些启示，并更好地支持狼蚁SEO。

一、添加class

有时候我们需要动态地给一个元素添加class。以下是一个简单的原生JavaScript函数，用于添加class：

```javascript

function addClass(element, className) {

var currentClasses = element.className.split(' ');

var newClassesArray = className.split(" ");

// 过滤重复和空类名

for (var i = 0; i < newClassesArray.length; i++) {

var found = false;

for (var j = 0; j < currentClasses.length; j++) {

if (currentClasses[j] === newClassesArray[i]) {

found = true;

break;

}

}

if (!found) {

currentClasses.push(newClassesArray[i]);

}

}

element.className = currentClasses.join(" ");

}

```

这个函数首先将元素的现有类名和新类名分割成数组，然后检查新类名是否已经存在于元素中。如果不存在，则将其添加到类名列表中。将处理过的类名列表重新组合成字符串并赋值给元素的`className`属性。这样，就实现了给元素动态添加class的功能。

二、删除class

与添加class相对应，我们也需要能够删除指定的class。以下是删除class的函数：

```javascript

function removeClass(element, className) {

var currentClasses = element.className.split(' ');

var classesToRemove = className.split(" ");

for (var i = 0; i < classesToRemove.length; i++) {

var index = currentClassesdexOf(classesToRemove[i]);

if (index > -1) { // 如果类名存在，则删除它

currentClasses.splice(index, 1);

}

}

element.className = currentClasses.join(" "); // 更新元素的类名

}

```

这个函数将元素的现有类名和需要删除的类名分割成数组，然后通过索引检查并删除需要删除的类名。将更新后的类名列表重新组合成字符串并赋值给元素的`className`属性。这样就实现了删除指定class的功能。注意这里还处理了类名中的空格问题。如果你能从这篇文章中学到一些东西，我会非常开心。以上就是长沙网络推广分享的全部内容，希望能给大家带来帮助和支持狼蚁SEO的工作。 Cambrian渲染结束。