当前位置：首页 > JavaScript

js点击实现高亮

2026-03-16 07:22:44JavaScript

实现点击高亮的基本方法

使用JavaScript实现点击元素高亮效果，可以通过添加/移除CSS类或直接修改样式属性完成。以下是两种常见实现方式：

通过classList切换类

document.querySelector('.target-element').addEventListener('click', function() {
  this.classList.toggle('highlight');
});

配套CSS样式：

.highlight {
  background-color: yellow;
  box-shadow: 0 0 8px rgba(255,255,0,0.6);
}

直接修改style属性

js点击实现高亮

element.addEventListener('click', function() {
  this.style.backgroundColor = this.style.backgroundColor === 'yellow' ? '' : 'yellow';
});

多元素高亮控制

需要实现多个元素中仅高亮当前点击项时，可先清除其他元素的高亮状态：

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function() {
    items.forEach(i => i.classList.remove('active'));
    this.classList.add('active');
  });
});

动态元素的事件委托

对于动态生成的元素，建议使用事件委托：

js点击实现高亮

document.body.addEventListener('click', function(e) {
  if (e.target.matches('.highlightable')) {
    e.target.classList.toggle('highlight');
  }
});

高亮动画增强

添加过渡效果使高亮更平滑：

.highlight {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

高亮状态持久化

如需保持高亮状态，可使用localStorage：

element.addEventListener('click', function() {
  const isActive = this.classList.toggle('active');
  localStorage.setItem('highlightedItem', isActive ? this.id : '');
});

页面加载时恢复状态：

window.addEventListener('DOMContentLoaded', () => {
  const id = localStorage.getItem('highlightedItem');
  if (id) document.getElementById(id)?.classList.add('active');
});