JavaScript classList.contains
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 classList.contains 方法。此方法对于检查 DOM 元素上的 CSS 类是否存在至关重要，可在 Web 应用程序中实现动态样式和行为。
基本定义
classList.contains 方法检查元素的类列表是否包含指定的 CSS 类。如果类存在，则返回 true，如果不存在，则返回 false。
此方法是 classList 属性提供的 DOMTokenList 接口的一部分。它广泛用于现代 Web 应用程序中的条件样式和状态管理。
基本 classList.contains
此示例演示了如何检查元素是否具有特定的 CSS 类。
<!DOCTYPE html>
<html>
<head>
<title>Basic classList.contains</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="content" class="highlight">Sample content</div>
<script>
const element = document.getElementById('content');
const hasClass = element.classList.contains('highlight');
console.log(hasClass); // Output: true
</script>
</body>
</html>
在此基本示例中，我们有一个带有 "highlight" 类的 div 元素。JavaScript 代码使用 classList.contains 检查此类。
该方法返回 true，因为该元素具有指定的类。这演示了 classList.contains 的基本用法。
条件样式
此示例演示了如何根据类的存在来有条件地应用样式。
<!DOCTYPE html>
<html>
<head>
<title>Conditional Styling</title>
<style>
.active {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<p id="status">Account Status: Normal</p>
<button onclick="toggleStatus()">Toggle Status</button>
<script>
function toggleStatus() {
const status = document.getElementById('status');
if (status.classList.contains('active')) {
status.textContent = 'Account Status: Normal';
status.classList.remove('active');
} else {
status.textContent = 'Account Status: Active';
status.classList.add('active');
}
}
</script>
</body>
</html>
这里我们有一个显示账户状态的段落和一个切换按钮。toggleStatus 函数使用 classList.contains 检查 'active' 类。
根据结果，它会更新文本并切换类。这演示了 classList.contains 在 UI 状态管理中的实际应用。
表单验证反馈
此示例演示了如何使用 classList.contains 进行表单验证反馈。
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
.error {
border: 2px solid red;
}
.error-message {
color: red;
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<input type="text" id="username" placeholder="Username">
<div id="usernameError" class="error-message">Username is required</div>
<button onclick="validateForm()">Submit</button>
<script>
function validateForm() {
const input = document.getElementById('username');
const error = document.getElementById('usernameError');
if (input.value.trim() === '') {
input.classList.add('error');
error.classList.add('show');
} else {
input.classList.remove('error');
error.classList.remove('show');
}
}
</script>
</body>
</html>
在此表单验证示例中，我们检查输入值并提供视觉反馈。虽然没有直接使用 contains，但它展示了上下文。
该示例演示了类操作（添加/删除）如何与 classList 一起工作，而 classList 通常与 contains 检查配对。
切换导航菜单
此示例展示了如何将 classList.contains 用于响应式导航菜单。
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
<style>
nav {
background: #333;
padding: 1rem;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-right: 1rem;
}
.mobile-menu {
display: none;
}
.show-menu {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<button id="menuToggle">Toggle Menu</button>
<nav id="mainNav">
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<script>
const toggle = document.getElementById('menuToggle');
const nav = document.getElementById('mainNav');
toggle.addEventListener('click', function() {
if (nav.classList.contains('mobile-menu')) {
nav.classList.remove('mobile-menu');
} else {
nav.classList.add('mobile-menu');
}
});
</script>
</body>
</html>
此导航示例在移动视图和桌面视图之间进行切换。classList.contains 检查确定当前状态。
根据检查结果，它会添加或删除移动菜单类。这种模式在响应式设计实现中很常见。
手风琴组件
此示例使用 classList.contains 为状态创建了一个手风琴组件。
<!DOCTYPE html>
<html>
<head>
<title>Accordion</title>
<style>
.accordion-item {
border: 1px solid #ddd;
margin-bottom: 5px;
}
.accordion-header {
padding: 10px;
background: #f5f5f5;
cursor: pointer;
}
.accordion-content {
padding: 0 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-item.active .accordion-content {
max-height: 200px;
padding: 10px;
}
</style>
</head>
<body>
<div class="accordion-item">
<div class="accordion-header">Section 1</div>
<div class="accordion-content">
Content for section 1 goes here.
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 2</div>
<div class="accordion-content">
Content for section 2 goes here.
</div>
</div>
<script>
const headers = document.querySelectorAll('.accordion-header');
headers.forEach(header => {
header.addEventListener('click', function() {
const item = this.parentElement;
const isActive = item.classList.contains('active');
// Close all items first
document.querySelectorAll('.accordion-item').forEach(el => {
el.classList.remove('active');
});
// Open current if it wasn't active
if (!isActive) {
item.classList.add('active');
}
});
});
</script>
</body>
</html>
此手风琴示例使用 classList.contains 在切换项目状态之前检查其是否处于活动状态。它演示了组件状态管理。
代码首先关闭所有项目，然后打开未处于活动状态的已点击项目。这创建了标准的手风琴行为。
来源
在本文中，我们展示了如何在 JavaScript 中使用 classList.contains。此方法对于现代 Web 开发中基于类的 DOM 操作至关重要。
作者
列出 所有 JS DOM 教程。