如何实现点击一个div时修改另一个div的backgroundcolor

你的代码存在两个核心问题：

• document.getElementsByClassName("this")返回的是HTMLCollection类数组对象，不是单个DOM元素，直接调用.style会无效，得指定具体的元素索引（比如第一个元素用[0]）
• 代码没有绑定点击事件，页面加载时就直接执行了，不是点击触发

正确实现示例 #

先搭好HTML结构：

<!-- 用来触发点击的div -->
<div class="trigger">点击我改变目标div背景</div>
<!-- 目标div -->
<div class="this" style="background-color: black; width: 100px; height: 100px;"></div>

然后写JS逻辑：

// 获取触发点击的元素
const triggerDiv = document.querySelector('.trigger');
// 获取目标元素（如果只有一个目标div，用querySelector更方便）
const targetDiv = document.querySelector('.this');

// 绑定点击事件
triggerDiv.addEventListener('click', function() {
  // 修改背景色为红色
  targetDiv.style.backgroundColor = 'red';
});

补充说明 #

• 如果页面中有多个class为this的div，要批量修改的话，可以用document.querySelectorAll('.this')遍历：

triggerDiv.addEventListener('click', function() {
  const targetDivs = document.querySelectorAll('.this');
  targetDivs.forEach(div => {
    div.style.backgroundColor = 'red';
  });
});

• 也可以用getElementsByClassName，但要注意它是动态集合，需要转成数组再遍历：

triggerDiv.addEventListener('click', function() {
  const targetDivs = document.getElementsByClassName('this');
  Array.from(targetDivs).forEach(div => {
    div.style.backgroundColor = 'red';
  });
});

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