使用JS隐藏Div时仍保留高度的问题排查

你的问题出在**visibility: hidden这个属性上——它只是让元素不可见，但元素原来占据的布局空间会被保留，所以才会出现空白。要彻底让元素消失且不占空间，得用display: none**。另外你代码里的一些逻辑也可以优化，下面是修正后的方案：

核心改动点 #

• 把控制隐藏的style.visibility = "hidden"替换成style.display = "none"
• 显示元素时，直接设置style.display = "block"（而不是用removeAttribute('style')，避免误删其他样式）
• 移除了不合理的radio禁用逻辑（否则选过一次后radio会被锁死，无法切换）

修正后的完整代码 #

function changeThis1(sender) { 
  if(document.getElementById('data1').checked){
    // 显示div1，恢复正常布局
    document.getElementById("div1").style.display = "block"; 
    // 隐藏div2，完全移除布局空间
    document.getElementById("div2").style.display = "none"; 
  }
}

function changeThis2(sender) { 
  if(document.getElementById('data2').checked){
    document.getElementById("div2").style.display = "block"; 
    document.getElementById("div1").style.display = "none"; 
  }
}

<div>   
    <input type="radio" id="data1" name="data" onchange="changeThis1(this)">
    <div class="kw_scelta"><strong>First</strong></div>  
    <div id="div1" style="display: none;">
        Data 1 <input id="datas1" type="number" /><br>
    </div>
</div>

<div>   
    <input type="radio" id="data2" name="data" onchange="changeThis2(this)">
    <div class="kw_scelta"><strong>Second</strong></div>  
    <div id="div2" style="display: none;">
        Data 2 <input id="datas2" type="number" /><br>
    </div>
</div>

额外说明 #

• display: none会让元素完全从文档流中移除，不占据任何空间；而visibility: hidden只是视觉隐藏，布局上还占着位置，这是两者最关键的区别。
• 如果你的div需要其他显示方式（比如inline），可以把block改成对应的值，比如inline-block或inline。

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