原生 JS 实现图标边框切换

问题

点击容器内的图标时，给图标添加红色边框（border: 1px solid red），点击空白处时重置所有图标的边框。

解答

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

// 判断是否点击了图标
function isIcon(target) {
  return target.className.includes('icon');
}

// 重置所有图标边框
function resetBorders() {
  const icons = box.querySelectorAll('.icon');
  icons.forEach(icon => {
    icon.style.border = '';
  });
}

box.onclick = function(e) {
  const target = e.target;
  
  // 点击图标：添加红色边框
  if (isIcon(target)) {
    resetBorders();
    target.style.border = '1px solid red';
  } 
  // 点击空白处：重置所有边框
  else {
    resetBorders();
  }
}

HTML 结构示例：

<div id="box">
  <span class="icon">📷</span>
  <span class="icon">🎵</span>
  <span class="icon">📁</span>
</div>

关键点

• 使用事件委托，在容器上绑定点击事件
• 通过 e.target 判断点击的是图标还是空白区域
• 每次点击图标前先重置所有边框，确保只有一个图标高亮
• 使用 className.includes() 判断元素类名