js实现高亮切换
实现高亮切换的 JavaScript 方法
方法一：通过类名切换高亮样式
通过添加或移除 CSS 类名实现高亮效果。定义一个高亮样式类（如 .highlight），通过 classList.toggle() 切换。
// CSS 样式
.highlight {
background-color: yellow;
color: black;
}
// JavaScript 代码
function toggleHighlight(element) {
element.classList.toggle('highlight');
}
// 调用示例
document.querySelector('.target-element').addEventListener('click', function() {
toggleHighlight(this);
});方法二：动态修改内联样式
直接通过 JavaScript 修改元素的 style 属性，适用于需要动态计算高亮颜色的场景。
function toggleHighlight(element) {
const currentColor = element.style.backgroundColor;
element.style.backgroundColor = currentColor === 'yellow' ? '' : 'yellow';
}
// 调用示例
document.querySelector('.target-element').addEventListener('click', function() {
toggleHighlight(this);
});方法三：多元素高亮切换（单选/多选模式）
实现多个元素中单选或多选的高亮效果。以下示例为单选模式：
function setupHighlightGroup(selector) {
const elements = document.querySelectorAll(selector);
elements.forEach(el => {
el.addEventListener('click', function() {
elements.forEach(item => item.classList.remove('highlight'));
this.classList.add('highlight');
});
});
}
// 调用示例
setupHighlightGroup('.highlight-group-item');方法四：使用数据属性存储状态
通过 data-* 属性存储高亮状态，适合复杂交互场景。
function toggleHighlightWithData(element) {
const isHighlighted = element.dataset.highlighted === 'true';
element.dataset.highlighted = !isHighlighted;
element.style.backgroundColor = isHighlighted ? '' : 'yellow';
}
// 调用示例
document.querySelector('.target-element').addEventListener('click', function() {
toggleHighlightWithData(this);
});注意事项
- 性能优化：批量操作 DOM 时使用
documentFragment或减少重绘 - 可访问性：高亮时考虑添加
aria-selected等 ARIA 属性 - 动画效果：可通过 CSS transition 添加平滑的高亮过渡效果
.highlight {
background-color: yellow;
transition: background-color 0.3s ease;
}以上方法可根据具体需求选择使用，类名切换是最推荐的方式，因其实现了样式与行为的良好分离。
