如何使用JavaScript为div添加CSS类而不作用于其子元素？

你当前的代码在点击div内的h5或p元素时，会把bg_yellow类添加到子元素上，而非目标div本身。这是因为event.target指向的是实际被点击的元素，而不是绑定事件的父div。

修改后的JavaScript代码 #

直接操作绑定事件的div元素（el），确保类只添加到目标div上：

let heading = document.querySelectorAll(".sf_day_card_heading");

heading.forEach((el) => {
  el.addEventListener('click', () => {
    // 移除所有div的bg_yellow类
    heading.forEach((e) => e.classList.remove('bg_yellow'));
    // 给当前绑定事件的div添加类
    el.classList.add('bg_yellow');
  })
})

也可以用event.currentTarget（始终指向绑定事件的元素）实现相同效果：

let heading = document.querySelectorAll(".sf_day_card_heading");

heading.forEach((el) => {
  el.addEventListener('click', (event) => {
    heading.forEach((e) => e.classList.remove('bg_yellow'));
    // currentTarget指向绑定事件的div，而非点击的子元素
    event.currentTarget.classList.add('bg_yellow');
  })
})

对应的HTML和CSS #

HTML

<div class="sf_day_card_heading">
  <h5>MON</h5>
  <p>January 9</p>
</div>

<div class="sf_day_card_heading">
  <h5>MON</h5>
  <p>January 9</p>
</div>

CSS

.bg_yellow {
  background: yellow;
}

核心说明 #

• el是通过querySelectorAll获取到的目标div，直接操作它能确保类只作用在父div上。
• event.currentTarget与el效果一致，它始终指向绑定事件的元素，不会随点击的子元素变化。

内容的提问来源于stack exchange，提问作者tukitooo1998