原生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渲染结束。