JS控制元素显示隐藏时如何调整相邻元素margin消除空白间距

问题原因 #

你遇到的空白是visibility: hidden的特性导致的：该属性只会让元素视觉上不可见，元素本身的高度、margin、padding等占据的布局空间会完全保留，所以test1隐藏后占的位置还在，自然会在test和test2之间留出空白。你修改test2的margin-top不生效，是因为空白是test1占的，不是两个元素之间的边距导致的。

解决方案 #

方案1（推荐）：用display: none替代visibility控制显隐

display: none会让元素直接从页面布局流中移除，完全不占任何空间，不需要额外调整其他元素的样式就能实现test2紧贴test的效果，控制代码更简单：

const test1Ele = document.querySelectorAll('h2')[1]
// 隐藏test1
test1Ele.style.display = 'none'
// 显示test1
test1Ele.style.display = 'block'

方案2：必须用visibility时，同步消去test1的占位空间

如果因为动画、事件保留等需求必须用visibility，隐藏时同时把test1的占位属性全部置0即可：

const test1Ele = document.querySelectorAll('h2')[1]
if (隐藏条件) {
  test1Ele.style.visibility = 'hidden'
  test1Ele.style.height = 0
  test1Ele.style.margin = 0
  test1Ele.style.padding = 0
  test1Ele.style.overflow = 'hidden'
} else {
  test1Ele.style.visibility = 'visible'
  // 恢复原有样式，可根据实际需求调整数值
  test1Ele.style.height = 'auto'
  test1Ele.style.margin = 'revert'
  test1Ele.style.padding = 'revert'
}

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