当前位置：首页 > JavaScript

js点击实现高亮

2026-02-03 06:24:57JavaScript

实现点击高亮的基本方法

使用JavaScript为元素添加点击高亮效果，可以通过修改CSS类或直接操作样式属性实现。以下是几种常见实现方式：

// 方法1：通过classList切换高亮类
document.querySelector('.target-element').addEventListener('click', function() {
  this.classList.toggle('highlight');
});

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

动态高亮多个元素

需要清除之前高亮元素时，可采用以下方案：

js点击实现高亮

let lastHighlighted = null;

document.querySelectorAll('.highlightable').forEach(item => {
  item.addEventListener('click', function() {
    if (lastHighlighted) lastHighlighted.classList.remove('highlight');
    this.classList.add('highlight');
    lastHighlighted = this;
  });
});

带过渡动画的高亮效果

通过CSS过渡属性实现平滑的高亮效果：

js点击实现高亮

.highlight {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #ffeb3b;
  box-shadow: 0 0 10px #ffeb3b;
}

高亮后自动取消

设置定时器自动取消高亮状态：

document.getElementById('flash-button').addEventListener('click', function() {
  this.classList.add('highlight');
  setTimeout(() => this.classList.remove('highlight'), 1000);
});

使用dataset存储高亮状态

通过HTML5的data属性管理高亮状态：

document.querySelector('.data-highlight').addEventListener('click', function() {
  const isHighlighted = this.dataset.highlighted === 'true';
  this.dataset.highlighted = !isHighlighted;
  this.style.backgroundColor = isHighlighted ? '' : '#ffff00';
});

以上方法可根据实际需求组合使用，建议优先考虑CSS类切换方案，便于维护和扩展样式效果。