如何通过onclick事件为指定元素添加CSS类实现背景变黄

首先定义用于设置黄色背景的CSS类：

.yellow-bg {
  background-color: yellow;
}

假设你的HTML结构如下：

<div class="sf_day_card_heading">第一天标题</div>
<div class="sf_day_card_heading">第二天标题</div>
<div class="sf_day_card_heading">第三天标题</div>

接下来完成JavaScript逻辑，你已经用querySelectorAll选中了所有目标元素，只需要遍历这些元素并绑定点击事件即可：

// 获取所有目标元素（你已完成的部分）
const headings = document.querySelectorAll('.sf_day_card_heading');

// 给每个元素绑定点击事件
headings.forEach(heading => {
  heading.addEventListener('click', function() {
    // 给当前点击的div添加黄色背景类
    this.classList.add('yellow-bg');
    
    // 若需要点击切换背景（点一下添加，再点一下移除），替换成下面这行：
    // this.classList.toggle('yellow-bg');
  });
});

关键逻辑说明 #

• 用forEach遍历所有选中的元素，确保每个.sf_day_card_heading都能响应点击
• addEventListener是绑定事件的标准方式，比直接写onclick属性更灵活，也方便后续移除事件
• 事件回调里的this指代当前被点击的元素，调用classList.add()即可给它添加指定CSS类
• 如果需要切换类的状态，classList.toggle()可以一步完成，无需手动判断元素是否已存在该类

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