js display属性与visibility属性的区别

发布时间:2020-05-05编辑:脚本学堂
本文介绍了js style中display属性与visibility属性的区别,有需要的朋友参考下。

 一、 display属性的常用属性值有两个,分别为
1、none: 隐藏,不占位,空件之间重新定位
2、block: 显示

二、  visibility属性的常用属性值有两个,分别为
 1、hidden: 隐藏,占位
2、visible : 显示

例子,
 

复制代码 代码示例:
<html>
<head>
<title>js display属性与visibility属性的区别_www.jb200.com</title>
<script language="javascript">
   function testVisibility()
   {
         document.all("tb_0").style.visibility="hidden";
        document.all("tb_1").style.visibility="visible";
   }
   function testDisplay()
   {
        document.all("tb_0").style.display="none";
        document.all("tb_1").style.display="block";
   }
   function test()
   {
       document.all("tb_0").style.visibility="visible";
       document.all("tb_1").style.visibility="visible";
       document.all("tb_0").style.display="block";
       document.all("tb_1").style.display="block";
   }
</script>
</head>
<body>
<form name="form1" method="post">
   <table id="tb_0">
    <tr>
     <td>内容测试--visible</td>
    </tr>
   </table>
   <table id="tb_1">
    <tr>
     <td>内容测试--hidden</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>