求助：实现HTML中点击div块后消失另一块缩小20px变蓝的JS功能

没问题，我来帮你搞定这个交互需求！下面是完整的实现代码，包含HTML、CSS和JavaScript部分，我会逐段解释逻辑：

HTML 结构 #

首先我们需要两个任意尺寸的div，给它们统一的类名方便选择，初始尺寸可以随便设置（这里举个例子，你也可以换成CSS里定义）：

<div class="box" style="width: 300px; height: 200px; background: #ff6347;"></div>
<div class="box" style="width: 250px; height: 180px; background: #4682b4;"></div>

CSS 基础样式（可选优化） #

给盒子加个外边距避免挤在一起，把光标改成指针提示可点击，再加个过渡动画让变化更平滑：

.box {
  margin: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

JavaScript 核心逻辑 #

这里的关键是：点击当前盒子后隐藏它，找到另一个盒子并修改它的尺寸和颜色。因为盒子的尺寸可能是CSS定义的（不是内联样式），所以要用getComputedStyle获取真实渲染尺寸：

// 获取所有box元素
const boxes = document.querySelectorAll('.box');

// 给每个盒子绑定点击事件
boxes.forEach(box => {
  box.addEventListener('click', function() {
    // 隐藏当前点击的盒子
    this.style.display = 'none';
    
    // 筛选出另一个未被隐藏的盒子
    const otherBox = Array.from(boxes).find(item => item !== this && item.style.display !== 'none');
    
    if (otherBox) {
      // 获取盒子的实际计算样式
      const computedStyle = window.getComputedStyle(otherBox);
      // 解析宽高数值（去掉px单位）
      const currentWidth = parseInt(computedStyle.width);
      const currentHeight = parseInt(computedStyle.height);
      
      // 尺寸缩小20px
      otherBox.style.width = `${currentWidth - 20}px`;
      otherBox.style.height = `${currentHeight - 20}px`;
      // 背景色改为蓝色
      otherBox.style.backgroundColor = '#0000ff';
    }
  });
});

逻辑拆解： #

1. 用querySelectorAll选中所有目标div，不管初始数量是多少（这里是2个）都能适配；
2. 遍历每个盒子，绑定点击事件；
3. 点击后先隐藏当前盒子（display: none）；
4. 通过find方法找出另一个还显示的盒子；
5. 用getComputedStyle获取盒子的真实渲染尺寸，避免只能读取内联样式的局限；
6. 把宽高数值各减20px后重新设置，同时修改背景色为蓝色；
7. 可选的过渡动画让尺寸和颜色变化更自然，提升用户体验。

这样不管初始div是多大尺寸，点击后都能准确执行你要的效果啦！

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