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

JavaScript隐藏控件的两种基本方法

在JavaScript中，隐藏控件主要涉及两种技术手段：修改元素的style.display属性或style.visibility属性。

当设置style.display为block或style.visibility为visible时，控件可见；反之，若style.display为none或style.visibility为hidden，则控件不可见。两者的关键区别在于布局影响：style.display不仅隐藏控件，还会使被隐藏的控件不再占用页面空间；而style.visibility仅将控件设为不可见，控件在页面中仍占据原有的位置。

function displayHideUI()
{
var ui =document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui =document.getElementById("bbs");
ui.style.display="";//display为空的话会好使，为block会使后边的空间换行
}
function visibilityHideUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="visible";
}
</script>

display属性取值详解

display属性支持多种值，具体描述如下： none：元素完全不显示。 block：元素显示为块级元素，前后带有换行符。 inline：默认值，元素显示为内联元素，前后无换行符。 inline-block：行内块元素（CSS2.1新增）。 list-item：作为列表显示。 run-in：根据上下文作为块级或内联元素显示。 compact：CSS中存在该值，但因缺乏广泛支持，已从CSS2.1中删除。 marker：CSS中存在该值，但因缺乏广泛支持，已从CSS2.1中删除。 table：作为块级表格显示（类似<table>），前后带换行符。 inline-table：作为内联表格显示（类似<table>），前后无换行符。 table-row-group：作为行分组显示（类似<tbody>）。 table-header-group：作为行分组显示（类似<thead>）。 table-footer-group：作为行分组显示（类似<tfoot>）。 table-row：作为表格行显示（类似<tr>）。 table-column-group：作为列分组显示（类似<colgroup>）。 table-column：作为单元格列显示（类似<col>）。 table-cell：作为表格单元格显示（类似<td>和<th>）。 table-caption：作为表格标题显示（类似<caption>）。 inherit：从父元素继承display属性的值。

JSP页面中的实际应用示例

本文解决的实际问题是在JSP页面中，为CSS定义的.label.error类添加ID，通过控制该ID的可见性，实现在收起div时清除JS提示信息的效果。具体实现步骤如下： 在初始化界面的函数中，首先获取目标元素：var label1 = document.getElementById("label1");

$(document).ready(function() {
$(".flipp .span4").click(function() {
$(this).parent().next().toggle();
$(this).parent().parent().prevAll().find(".panel").hide();
$(this).parent().parent().nextAll().find(".panel").hide();
var label1 = document.getElementById("label1");
label1.style.display="none";
})

随后在JSP页面的相应位置插入该标签元素。

<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>

对于CSS定义的.label.error类，还可以使用jQuery语句$("label.error").removeAttr("style").attr("style", "display: none;");来实现相同功能。此外，似乎无需在页面底部为label定义额外的id值即可实现上述效果。