display 与 visible 属性比较

visibility 属性设置元素是否可见。

设置 visibility 属性：

Object.style.visibility="visible|hidden|collapse|inherit"

返回 visibility 属性：

Object.style.visibility

值	描述
visible	默认。元素是可见的。
hidden	元素是不可见的，但仍然影响布局。
collapse	当在表格行或单元格中使用时，该元素是不可见的（与 "hidden" 相同）。
inherit	visibility 属性的值从父元素继承。

语法：

Object.style.visibility=visible|hidden|collapse

1. <div>visibility：元素的位置仍被占用</div>  
2. <div id="div3" style="visibility:visible;">DIV 3</div>  
3. <div id="div4" style="visibility:hidden;">DIV 4</div>  

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

display 属性设置元素如何显示。

设置 display 属性：

Object.style.display=" value"

返回 display 属性：

Object.style.display

值	描述
block	元素呈现为块级元素。
compact	元素呈现为块级元素或内联元素，取决于上下文。
inherit	display 属性的值从父元素继承。
inline	默认。元素呈现为内联元素。
inline-block	元素呈现为内联盒子内的块盒子。
inline-table	元素呈现为内联表格（类似 <table>），表格前后没有换行符。
list-item	元素呈现为列表。
marker	该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。
none	元素不会被显示。
run-in	元素呈现为块级或内联元素，取决于上下文。
table	元素呈现为块级表格（类似 <table>），表格前后带有换行符。
table-caption	元素呈现为表格标题（类似 <caption>）。
table-cell	元素呈现为表格单元格（类似 <td> 和 <th>）。
table-column	元素呈现为单元格的列（类似 <col>）。
table-column-group	元素呈现为一个或多个列的分组（类似 <colgroup>）。
table-footer-group	元素呈现为表格页脚行（类似 <tfoot>）。
table-header-group	元素呈现为表格页眉行（类似 <thead>）。
table-row	元素呈现为表格行（类似 <tr>）。
table-row-group	元素呈现为一个或多个行的分组（类似 <tbody>）。

1. <div>display：元素的位置不被占用</div>  
2. <div id="div1" style="display:block;">DIV 1</div>  
3. <div id="div2" style="display:none;">DIV 2</div> 

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

普遍方法： 

Java代码  

1. $("#id").css('display','none'); //隐藏  
2. $("#id").css('display', 'block'); //显示  

上述方法在ie6、搜狗和360等浏览器中不支持。 

通用方法： 

Java代码  

1. $("#id").hide(); //隐藏  
2. $("#id").show(); //显示  

<span style="font-size:18px;"> </span>

$("#id").show()表示display:block,

 $("#id").hide()表示display:none; 

$("#id").toggle()切换元素的可见状态。

提示：即使不可见的元素也会占据页面上的空间。

请使用 "display" 属性来创建不占据页面空间的不可见元素。