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';
}