点击图标边框变色

实现点击图标添加红色边框，点击空白处重置的交互效果

问题

实现以下效果：

点击容器内的图标，图标边框变成 border: 1px solid red
点击空白处重置边框

解答

HTML 结构

<div class="container" id="container">
  <span class="icon">🏠</span>
  <span class="icon">⭐</span>
  <span class="icon">❤️</span>
  <span class="icon">🔔</span>
</div>

CSS 样式

.container {
  display: flex;
  gap: 20px;
  padding: 40px;
  background: #f5f5f5;
  min-height: 200px;
}

.icon {
  font-size: 32px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid transparent; /* 预留边框位置，避免点击时布局抖动 */
}

.icon.active {
  border: 1px solid red;
}

JavaScript 实现

const container = document.getElementById('container');

container.addEventListener('click', function(e) {
  // 获取所有图标
  const icons = container.querySelectorAll('.icon');
  
  // 先清除所有图标的选中状态
  icons.forEach(icon => icon.classList.remove('active'));
  
  // 判断点击的是否是图标
  if (e.target.classList.contains('icon')) {
    // 给点击的图标添加选中状态
    e.target.classList.add('active');
  }
  // 如果点击的是空白处（container 本身），不做额外处理，边框已被重置
});

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>点击图标边框变色</title>
  <style>
    .container {
      display: flex;
      gap: 20px;
      padding: 40px;
      background: #f5f5f5;
      min-height: 200px;
    }

    .icon {
      font-size: 32px;
      padding: 10px;
      cursor: pointer;
      border: 1px solid transparent;
    }

    .icon.active {
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <span class="icon">🏠</span>
    <span class="icon">⭐</span>
    <span class="icon">❤️</span>
    <span class="icon">🔔</span>
  </div>

  <script>
    const container = document.getElementById('container');

    container.addEventListener('click', function(e) {
      const icons = container.querySelectorAll('.icon');
      icons.forEach(icon => icon.classList.remove('active'));
      
      if (e.target.classList.contains('icon')) {
        e.target.classList.add('active');
      }
    });
  </script>
</body>
</html>

关键点

事件委托：将事件监听器绑定在父容器上，通过 e.target 判断实际点击的元素
预留边框空间：使用 border: 1px solid transparent 避免添加边框时产生布局抖动
统一重置逻辑：每次点击先清除所有选中状态，再根据条件添加，逻辑更清晰
classList API：使用 add/remove 操作类名，比直接修改 style 更易维护