JS的display与visibility隐藏文本的区别

fanjf

浏览: 329637 次
性别:
来自: 安徽

最近访客更多访客>>

u012363178

Blue丶s

ywt_go

terryhello

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

<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　将对象作为表格行组显示

分享到：

js中的窗体（window） | js全选简单例子

2012-02-25 01:27
浏览 1072
评论(0)
分类:开源软件
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论