如何为点击的指定类div修改CSS（无需逐个设置ID）

方法1：事件委托（推荐） #

借助事件冒泡机制，给父容器绑定一次点击事件，即可处理所有目标类元素的点击，尤其适合动态添加的元素。

// 选择目标div的父容器（比如body，或更具体的父元素）
document.querySelector('.div-container').addEventListener('click', function(e) {
  // 判断点击对象是否属于目标类（这里以"target-div"为例）
  if (e.target.matches('.target-div')) {
    // 直接修改行内样式
    e.target.style.height = 'auto';
    // 更推荐的方式：通过切换类名管理样式
    e.target.classList.toggle('active-state');
  }
});

配套CSS（使用类名管理样式）：

.active-state {
  height: auto;
  /* 可添加其他需要修改的样式 */
}

方法2：批量绑定事件 #

获取所有目标类元素，循环为每个元素绑定点击事件，通过this指向被点击的元素。

// 获取所有目标类div
const targetDivs = document.querySelectorAll('.target-div');

// 遍历绑定点击事件
targetDivs.forEach(div => {
  div.addEventListener('click', function() {
    // 修改当前点击元素的样式
    this.style.height = 'auto';
    // 或切换类名
    this.classList.toggle('active-state');
  });
});

关键提示 #

• 优先使用类名切换替代直接操作style属性，样式逻辑更清晰，便于后续维护。
• 事件委托无需为每个元素单独绑定事件，性能更优，且支持动态新增的元素。

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