JS的display与visibility暗藏文本的区别
日期：2014-05-16 浏览次数：20424 次
<html>
<head>
<title>JS的display与visibility隐藏文本的区别</title>
<script language="javascript">
?? function testVisibility()
?? {
???????? document.all("tb_0").style.visibility="hidden";
?? }
?? function testDisplay()
?? {
??????? document.all("tb_1").style.display="none";
?? }
?? function test()
?? {
?????? document.all("tb_0").style.visibility="visible";
?????? document.all("tb_1").style.display="block";
?? }
</script>
</head>
<body>
JS中的style对象中的display属性和visibility属性的区别<br/>
一、? visibility属性的常用属性值有两个,分别为 <br/>
?????? 1、hidden: 隐藏，占位 <br/>
?????? 2、visible : 显示 <br/>
二、 display属性的常用属性值有两个,分别为 <br/>
?????? 1、none: 隐藏，不占位，空件之间重新定位 <br/>
?????? 2、block: 显示 <br/>
示例:
<form name="form1" method="post">
?? <table id="tb_0" bgColor ='#e8f5ff'>
??? <tr>
???? <td>内容测试--visibility</td>
??? </tr>
?? </table>
?? <hr/>
?? <table id="tb_1"? bgColor ='#CCCCFF'>
??? <tr>
???? <td>内容测试--display</td>
??? </tr>
?? </table>
?? <input type="button" onClick="test();" value="还原">
?? <input type="button" onClick="testVisibility();" value="测试visibility">
?? <input type="button" onClick="testDisplay();" value="测试display">
</form>
</body>
</html>
?
display属性说明：
style.display属性一切皆有可能
display版本：CSS1/CSS2 ?? 兼容性：IE4+?? NS4+ 继承性：无
?
语法：
display?? :?? block?? |?? none?? |?? inline?? |?? compact?? |?? marker?? |?? inline-table?? |?? list-item?? |?? run-in?? |??
table?? |table-caption?? |?? table-cell?? |?? table-column?? |?? table-column-group?? |?? table-footer-group?? |?? table-
header-group?? |?? table-row?? |?? table-row-group??
?
参数：
block?? :?? CSS1 块对象的默认值。用该值为对象之后添加新行??
none?? :?? CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间??
inline?? :?? CSS1 内联对象的默认值。用该值将从对象中删除行??
compact?? :?? CSS2 分配对象为块对象或基于内容之上的内联对象??
marker?? :?? CSS2 指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before?? 伪元素一起使用??
inline-table?? :?? CSS2 将表格显示为无前后换行的内联对象或内联容器??
list-item?? :?? CSS1 将块对象指定为列表项目。并可以添加可选项目标志??
run-in?? :?? CSS2 分配对象为块对象或基于内容之上的内联对象??
table?? :?? CSS2 将对象作为块元素级的表格显示??
table-caption?? :?? CSS2 将对象作为表格标题显示??
table-cell?? :?? CSS2 将对象作为表格单元格显示??
table-column?? :?? CSS2 将对象作为表格列显示??
table-column-group?? :?? CSS2 将对象作为表格列组显示??
table-header-group?? :?? CSS2 将对象作为表格标题组显示??
table-footer-group?? :?? CSS2 将对象作为表格脚注组显示??
table-row?? :?? CSS2 将对象作为表格行显示??
table-row-group?? :?? CSS2 将对象作为表格行组显示
