Heim > Web-Frontend > HTML-Tutorial > css关于visibility设置 “collapse”值问题_html/css_WEB-ITnose

css关于visibility设置 “collapse”值问题_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:05:33
Original
1185 Leute haben es durchsucht

1、可能已经用过 visibility上千遍了,最常用的是 visible和 hidden,用来使元素显示或者隐藏。

还有第三个很少被用到的值是collapse,除了在表格的行,列中使用有差异外,他和hidden的作用是等同的。

下面让我们看看在表格元素中,collapse是怎么工作的,不过前提是table的border-collapse需要设定成separate才会有效果哦!

下面直接上demo:

其中主要()代码如下:

Nach dem Login kopieren
Fruits Vegetables Rocks
Apple Celery Granite
Orange Cabbage Flint

2.js文件如下:

var btns = document.getElementsByTagName('button'),    rows = document.getElementsByTagName('tr');btns[0].addEventListener('click', function () {  rows[1].className = 'vc';}, false);btns[1].addEventListener('click', function () {  rows[1].className = 'vh';}, false);btns[2].addEventListener('click', function () {  rows[1].className = '';}, false);
Nach dem Login kopieren

3、css文件如下:

body {  text-align: center;  padding-top: 20px;  font-family: Arial, sans-serif;}table {  border-collapse: separate;  border-spacing: 5px;  border: solid 1px black;  width: 500px;  margin: 0 auto;}th, td {  text-align: center;  border: solid 1px black;  padding: 10px;}.vc {  visibility: collapse;}.vh {  visibility: hidden;}button {  margin-top: 5px;}
Nach dem Login kopieren

默认的输出为:

当点击COLLAPSE ROW1 时,显示如下:

当点击HIDE ROW1,显示如下:

虽然collapse有hidden的特性,但是表现的形式却与hidden有很大的区别;现在你可以根据自己的需要,做出选择了。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage