css中少见的visibility:collapse

    visibility 属性设置元素是否应该是可见的,允许作者显示或隐藏一个元素。

    与display属性类似但仍有很重要的区别。display:none;隐藏元素并且不占据原有的空间。visibility内容不可见,但元素原来的空间,位置,大小仍占据。


    visibility所具有的值

    1. visible:默认。元素是可见的。
    2. hidden:元素是不可见的,但仍然影响布局占据空间。
    3. collapse:对于一般的元素,它的表现跟 hidden 是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟 display: none 一样,也就是说,它们占用的空间也会释放。
    4. inherit:visibility 属性的值从父元素继承。

    js设置visibility的值

    1
    document.getElementById("p1").style.visibility="hidden";

    demo测试代码

    测试地址
    css代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    .dn{
    display: none;
    }
    .vh{
    visibility: hidden;
    }
    .vc{
    visibility: collapse;
    }
    </style>

    html代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <h3>测试display和visibility</h3>
    <p>
    当使用<b>display:none;</b>属性, 元素会隐藏,并不占据空间。<button>点击测试</button>
    </p>
    <p>
    当使用<b>visibility:hidden</b>属性,元素会被隐藏,但是占据空间。<button>点击测试</button>
    </p>
    <hr>
    <h3>测试visibility的collapse在不同的地方用处不同</h3>
    <p>当在普通元素中使用<b>visibility:collapse;</b>时,跟visibility:hidden表现相同
    <button>点击测试</button></p>
    <p>当在table中使用visibility:collapse;时,跟display:none相同,如下<button>点击测试</button></p>
    <p>当在table中使用visibility:hidden;时,一样的占据空间,如下<button>点击测试</button></p>
    <table border="1">
    <tr>
    <th>Fruits</th>
    <th>Vegetables</th>
    <th>Rocks</th>
    </tr>
    <tr>
    <td>Apple</td>
    <td>Celery</td>
    <td>Granite</td>
    </tr>
    <tr>
    <td>Orange</td>
    <td>Cabbage</td>
    <td>Flint</td>
    </tr>
    </table>

    js代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var btn = document.getElementsByTagName('button');
    var b = document.getElementsByTagName('b');
    var rows = document.getElementsByTagName('tr');
    btn[0].onclick = function(){
    b[0].className = 'dn';
    }
    btn[1].onclick = function(){
    b[1].className = 'vh';
    }
    btn[2].onclick = function(){
    b[2].className = 'vh';
    }
    btn[3].onclick = function(){
    rows[1].className = 'vc';
    }
    btn[4].onclick = function(){
    rows[1].className = 'vh';
    }