HTML+原生JS实现Div可见性切换时自动调整尺寸

我来帮你搞定这个问题！其实不用写复杂的JS来计算宽度，借助CSS Flex布局就能轻松实现div根据显示数量自动分配空间的效果，同时还能简化你的冗余代码。

步骤1：简化JavaScript函数 #

你现在有三个重复的切换函数，我们可以把它们合并成一个通用函数，减少代码冗余：

// 通用切换函数，接收div的ID作为参数
function toggleDiv(divId) {
  const div = document.getElementById(divId);
  // 切换显示/隐藏状态
  div.style.display = div.style.display === "none" ? "block" : "none";
}

步骤2：改用Flex布局（核心调整） #

原来的float布局需要手动计算宽度，换成Flex布局后，容器会自动帮我们分配空间。修改CSS如下：

/* 父容器设置Flex布局，元素之间间距20px（替代原来的margin） */
.div-container {
  display: flex;
  gap: 20px;
  padding: 0 20px; /* 可选：让容器左右保留边距，和原效果一致 */
}

/* 给每个div统一设置基础样式，flex:1表示自动平分可用空间 */
.div-item {
  flex: 1;
  padding: 50px 0;
  text-align: center;
}

/* 保留每个div的背景色 */
#myDIV-1 { background-color: lightblue; }
#myDIV-2 { background-color: coral; }
#myDIV-3 { background-color: gold; }

步骤3：更新HTML结构 #

给包裹div的父容器添加class，同时给每个子div添加统一的class：

<p>Click on the checkboxes to toggle the visibility of the divs.</p>
<input type="checkbox" onclick="toggleDiv('myDIV-1')" checked>Toggle DIV-1</input>
<input type="checkbox" onclick="toggleDiv('myDIV-2')" checked>Toggle DIV-2</input>
<input type="checkbox" onclick="toggleDiv('myDIV-3')" checked>Toggle DIV-3</input>

<!-- 父容器添加class -->
<div class="div-container">
 <div id="myDIV-1" class="div-item"> This is my DIV-1 element. </div>
 <div id="myDIV-2" class="div-item"> This is my DIV-2 element. </div>
 <div id="myDIV-3" class="div-item"> This is my DIV-3 element. </div>
</div>

效果说明 #

这样修改后：

• 当3个div都显示时，flex:1会让它们自动平分父容器的可用空间（减去gap的20px间距）
• 隐藏任意一个div后，剩下的div会自动调整宽度，平分剩余空间
• 只显示一个div时，它会占满整个父容器的可用宽度

如果你坚持用Float布局（备选方案） #

如果你不想改动布局方式，也可以通过JS计算宽度。添加一个更新宽度的函数，在每次切换后调用：

function updateDivWidths() {
  const divs = [document.getElementById('myDIV-1'), document.getElementById('myDIV-2'), document.getElementById('myDIV-3')];
  // 统计当前显示的div数量
  const visibleCount = divs.filter(div => div.style.display !== 'none').length;
  
  if (visibleCount === 0) return;
  
  // 计算每个div的宽度：减去所有margin的总宽度后平分
  const totalMargin = 40 * visibleCount; // 每个div左右margin各20px，总横向margin为40*数量
  divs.forEach(div => {
    if (div.style.display !== 'none') {
      div.style.width = `calc((100% - ${totalMargin}px) / ${visibleCount})`;
    }
  });
}

// 修改原来的切换函数，每次切换后更新宽度
function myFunction1() { 
  var x = document.getElementById("myDIV-1"); 
  x.style.display = x.style.display === "none" ? "block" : "none";
  updateDivWidths();
}

function myFunction2() { 
  var x = document.getElementById("myDIV-2"); 
  x.style.display = x.style.display === "none" ? "block" : "none";
  updateDivWidths();
}

function myFunction3() { 
  var x = document.getElementById("myDIV-3"); 
  x.style.display = x.style.display === "none" ? "block" : "none";
  updateDivWidths();
}

// 页面加载时初始化宽度
window.onload = updateDivWidths;

这种方式需要手动计算宽度，而且窗口resize时可能需要重新计算，不如Flex布局方便，所以更推荐第一种方案。

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