下面就详细讲解一下“详解原生JS动态添加和删除类”的完整攻略。
概述
在前端开发中，动态改变元素的样式是十分常见的需求，其中动态添加类名和动态删除类名就是两种常见的实现方式。通过动态改变元素的类名，可以轻松实现样式的交互效果和动画效果。
动态添加类名
方法一：使用Element.classList方法
Element.classList是DOM API提供的一个属性，它包含了元素的class列表。使用classlist，我们可以轻松对元素的class进行添加、删除和切换操作。
下面是向元素中动态添加类名的示例代码：
// 获取目标元素
const targetElem = document.querySelector('.target');
// 添加类名
targetElem.classList.add('new-class');
在这个示例中，我们首先通过querySelector获取了目标元素，然后使用classList.add()方法向目标元素中添加了一个名为new-class的类名。
方法二：直接修改元素的className属性
Element对象还有一个className属性，它可以读取或设置元素的class属性。通过className属性的操作，我们也可以轻松实现类名的添加：
// 获取目标元素
const targetElem = document.querySelector('.target');
// 添加类名
targetElem.className += 'new-class ';
在这个示例中，我们同样首先获取了目标元素，并通过直接修改className属性向其添加了new-class类名。
动态删除类名
方法一：使用Element.classList方法
要删除类名，我们同样可以使用Element.classList提供的相关方法。相比于添加类名，删除类名只需要调用ClassList.remove()方法即可：
// 获取目标元素
const targetElem = document.querySelector('.target');
// 删除类名
targetElem.classList.remove('old-class');
在这个示例中，我们通过classList.remove()方法删除了目标元素上的一个名为old-class的类名。
方法二：直接修改元素的className属性
与动态添加类名时不同，当我们要删除类名时不能简单地使用+=对className属性进行操作，因为这样会污染元素原先的类名。正确的做法是使用字符串的replace()方法：
// 获取目标元素
const targetElem = document.querySelector('.target');
// 删除类名
targetElem.className = targetElem.className.replace('old-class', '');
在这个示例中，我们同样通过获取目标元素，然后使用字符串的replace()方法，将目标元素上的old-class类名删除了。
示例说明
示例一：动态切换元素的类名
动态切换元素的类名是一种常见的实现样式交互效果的方式。下面的示例中，我们给一个按钮添加了一个点击事件，点击按钮时会让按钮变成红色，再次点击时则会变回原样：
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: green;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.btn.active {
background-color: red;
}
</style>
</head>
<body>
<button class="btn" id="toggleBtn">
点击切换样式
</button>
<script>
const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', function() {
toggleBtn.classList.toggle('active');
})
</script>
</body>
</html>
在这个示例中，我们首先在CSS中定义了两个类名：.btn和.btn.active。.btn类名表示按钮的默认样式，.btn.active表示按钮的激活状态。然后我们给按钮添加了一个click事件，通过按钮的classList.toggle()方法，切换了按钮的active类名，使按钮实现了样式的动态切换。
示例二：动态删除多个类名
当我们需要动态删除多个类名时，可以使用一个循环遍历的方式，依次删除目标元素上的每一个类名。下面的示例中，我们首先定义了一个名为removeClass()的函数，然后在点击按钮时，调用该函数删除元素上的两个类名：
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: green;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.btn.active {
background-color: red;
}
.btn.disabled {
opacity: .5;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="btn active disabled" id="toggleBtn">
点击删除多个类名
</button>
<script>
const toggleBtn = document.getElementById('toggleBtn');
function removeClass(elem, className) {
// 将目标元素上的类名通过空格分隔为一个数组
const classNames = elem.className.split(' ');
// 遍历类名数组，依次删除目标元素上的每一个类名
for (let i = 0; i < classNames.length; i++) {
if (classNames[i] === className) {
classNames.splice(i, 1);
i -= 1;
}
}
// 将删除后的类名数组重新拼接成字符串，赋值给目标元素的className属性
elem.className = classNames.join(' ');
}
toggleBtn.addEventListener('click', function() {
removeClass(toggleBtn, 'active');
removeClass(toggleBtn, 'disabled');
})
</script>
</body>
</html>
在这个示例中，我们首先在CSS中定义了三个类名：.btn、.btn.active和.btn.disabled。.btn类名是按钮的默认样式，.btn.active表示激活状态，.btn.disabled表示禁用状态。然后我们在按钮上添加了三个类名。当我们点击按钮时，通过调用前面定义好的removeClass()函数，依次删除按钮上的active和disabled两个类名，使按钮恢复到默认样式。在removeClass()函数中，我们首先将元素上的类名通过split()方法分割成一个数组，然后使用循环遍历的方式，依次查找并删除数组中的目标类名，最后使用join()方法将类名数组再次拼接成一个字符串，赋值给目标元素的className属性，完成对类名的删除操作。
以上就是“详解原生JS动态添加和删除类”的完整攻略和两个示例的说明。希望能对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解原生JS动态添加和删除类 - Python技术站
微信扫一扫 
支付宝扫一扫 