js实现点击切换
实现点击切换的 JavaScript 方法
方法一：通过 classList.toggle 切换类名
定义 CSS 样式和初始状态，通过 JavaScript 切换类名实现样式或状态变化。
<style>
.active {
background-color: #4CAF50;
color: white;
}
</style>
<button id="toggleBtn">点击切换</button>
<script>
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
btn.classList.toggle('active');
});
</script>方法二：直接修改元素属性
通过判断当前状态动态修改属性值（如显示/隐藏）。
<div id="content" style="display:none;">隐藏内容</div>
<button id="toggleBtn">显示/隐藏</button>
<script>
const btn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
btn.addEventListener('click', () => {
content.style.display = content.style.display === 'none' ? 'block' : 'none';
});
</script>方法三：切换多个元素的显示状态
通过遍历元素列表实现批量切换。
<div class="item">项目1</div>
<div class="item">项目2</div>
<button id="toggleAll">切换所有</button>
<script>
const toggleBtn = document.getElementById('toggleAll');
const items = document.querySelectorAll('.item');
toggleBtn.addEventListener('click', () => {
items.forEach(item => {
item.style.display = item.style.display === 'none' ? 'block' : 'none';
});
});
</script>方法四：使用数据属性存储状态
利用 dataset 存储自定义状态，实现复杂切换逻辑。
<button id="toggleBtn" data-state="off">状态: 关闭</button>
<script>
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
const isOn = btn.dataset.state === 'on';
btn.dataset.state = isOn ? 'off' : 'on';
btn.textContent = `状态: ${isOn ? '关闭' : '开启'}`;
});
</script>注意事项
- 事件监听需在 DOM 加载完成后执行，可将脚本放在
<body>末尾或使用DOMContentLoaded事件。 - 切换类名时，CSS 应预先定义好不同状态下的样式。
- 动态修改样式时注意浏览器兼容性问题。
