js隐藏域的显示与隐藏

最新推荐文章于 2022-03-04 16:28:23 发布

iteye_17600

最新推荐文章于 2022-03-04 16:28:23 发布

阅读量360

点赞数

分类专栏： Javascript 文章标签：单元测试 JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/iteye_17600/article/details/81761652

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>隐藏文本</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>
JS中的style对象中的display属性和visibility属性的区别收藏
一、 display属性的常用属性值有两个,分别为

            1、none: 隐藏，不占位，空件之间重新定位
       2、block: 显示

二、 visibility属性的常用属性值有两个,分别为

       1、hidden: 隐藏，占位
       2、visible : 显示

示例:
<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>

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