JS控制HTML元素显示与隐藏的两种方法及区别

JS控制元素显示的两种方法概述

使用JavaScript控制页面控件的显示与隐藏主要有两种方式，这两种方式分别对应HTML样式（style）中的两个不同属性。它们的核心区别在于：控件被隐藏后，其在页面上是否仍然占据原有的空间位置。

方法一：保留占位空间的隐藏

第一种方法：

document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";

采用上述方式实现隐藏效果后，控件虽然在视觉上不可见，但其原本占据的页面空间依然保留，表现为该位置出现空白。

方法二：不占位空间的隐藏

第二种方法：

document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";

采用上述方式实现隐藏效果后，控件不仅视觉上不可见，其原本占据的页面空间也不再被占用，后续元素会填补该位置。