本文详解JavaScript中隐藏HTML控件的两种主要方式：style.display与style.visibility。通过对比分析，阐述display:none在隐藏控件的同时释放页面布局空间，而visibility:hidden仅隐藏视觉内容但保留原有占位空间的特性。文章提供完整的HTML结构及对应的JavaScript函数实现代码，帮助开发者根据实际布局需求选择合适的隐藏策略。
display与visibility隐藏控件的区别
当元素的style.display属性设置为"block"或style.visibility属性设置为"visible"时，控件处于可见状态；反之，若style.display设为"none"或style.visibility设为"hidden"，则控件不可见。
两者的核心区别在于对页面布局的影响："display"属性在隐藏控件的同时，会释放该控件原本占用的页面空间；而"visibility"属性仅将控件设为不可见，控件在页面布局中仍保留其原有的位置。
HTML控件与按钮结构
<p>
<input id='control' value="想要隐藏的控件">
</p>
<p>
隐藏上面的控件，并使其不占用页面上的位置
<input type="button" value='隐藏' onclick='displayHide_control()'>
<input type="button" value='显示' onclick='displayShow_control()'>
<br />
仅仅隐藏控件，其位置仍然占用
<input type="button" value='隐藏' onclick='visibilityHide_control()'>
<input type="button" value='显示' onclick='visibilityShow_control()'>
</p>
JavaScript实现代码
<script language="javascript" type="text/javascript">
function displayHide_control()
{
var _control = document.getElementById("control");
_control.style.display="none";
}
function displayShow_control()
{
var _control = document.getElementById("control");
_control.style.display="block";
}
function visibilityHide_control()
{
var _control = document.getElementById("control");
_control.style.visibility="hidden";
}
function visibilityShow_control()
{
var _control = document.getElementById("control");
_control.style.visibility="visible";
}
</script>