JavaScript提供了一个非常方便的属性classList，用于操作元素的类名
什么是 classList？
classList 是一个 DOM 属性，它返回一个元素的类名集合，并提供了一系列操作这些类名的方法。常用的方法包括：
add(className)：添加一个类名remove(className)：移除一个类名toggle(className)：切换一个类名（如果类名存在则移除，否则添加）contains(className)：检查是否包含某个类名
基本用法
示例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classList 方法示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">点击我切换样式</div>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
myDiv.classList.toggle('highlight');
});
</script>
</body>
</html>
在这个示例中，点击 #myDiv 元素会切换 highlight 类，从而改变背景颜色
classList.add 方法
add 方法用于向元素添加一个或多个类名。如果类名已经存在，则不会重复添加。
element.classList.add('class1', 'class2');
classList.remove 方法
remove 方法用于移除元素的一个或多个类名。如果类名不存在，则不会报错。
element.classList.remove('class1', 'class2');
classList.toggle 方法
toggle 方法用于切换元素的类名。如果类名存在，则移除它；如果类名不存在，则添加它。toggle 方法还可以接受一个布尔值参数，指示是否强制添加或移除类名。
element.classList.toggle('className');
element.classList.toggle('className', true); // 强制添加类名
element.classList.toggle('className', false); // 强制移除类名
classList.contains 方法
contains 方法用于检查元素是否包含某个类名。如果包含，则返回 true；否则返回 false。
if (element.classList.contains('className')) {
// 元素包含 className 类
}
实际应用场景
1. 切换导航菜单的显示/隐藏
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航菜单切换示例</title>
<style>
.menu {
display: none;
background-color: #eee;
padding: 10px;
}
.menu.show {
display: block;
}
</style>
</head>
<body>
<button id="menuButton">切换菜单</button>
<div id="menu" class="menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
<script>
var menuButton = document.getElementById('menuButton');
var menu = document.getElementById('menu');
menuButton.addEventListener('click', function() {
menu.classList.toggle('show');
});
</script>
</body>
</html>
2. 表单验证的视觉反馈
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证示例</title>
<style>
.error {
border: 2px solid red;
}
</style>
</head>
<body>
<form id="myForm">
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
<script>
var myForm = document.getElementById('myForm');
var email = document.getElementById('email');
myForm.addEventListener('submit', function(event) {
event.preventDefault();
if (!email.value.includes('@')) {
email.classList.add('error');
} else {
email.classList.remove('error');
}
});
</script>
</body>
</html>
总结
使用 classList 方法可以轻松地操作元素的类名，从而动态地改变网页的样式。它提供了一种简洁而高效的方式来实现常见的样式切换需求。无论是实现简单的点击切换样式，还是更复杂的交互效果，classList 都是一个强大且易于使用的工具。
谢谢大家,我是小辉,请大家多多关照