HTML页面元素的隐藏方法

今天我在做地勘局管理系统时， 需要解决一个表格的筛选功能， 只是前段的功能 不涉及数据库。 这就需要用到HTML 元素的隐藏和显示了， 所以我搜罗了很多关于隐藏和显示的方法。下面罗列一下：

1、 元素的display属性 ：none  此元素不会被显示。  inline  默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） block 此元素将显示为块级元素，此元素前后会带有换行符。

2、元素的visibility属性：visible  默认值。元素是可见的。hidden 元素是不可见的。collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。inherit  当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

3、opacity:0 设置透明度为零 

4、设置height，width等盒模型属性为0 如果元素内有子元素或内容还要加上overflow:hidden来隐藏子元素

.hiddenBox { margin:0;

border:0; 

  padding:0;

  height:0; 

width:0; 

overflow:hidden; }

5、元素的方法 show() 和 hide()

我首先想到的是display的方法 但是经过实践表明它用于表格的行的隐藏显示不太好，隐藏(none)没问题 ，一显示(block)就乱套了，不是原来的表格格式。然后从网上查到后面的3种方法 第2,3种方法可以，但是只是隐藏，隐藏行还是在原地占着位置 看不到了而已 第4中是我看的一个博客的博主自己研究总结的，不过也不适用于行的隐藏。最后山穷水尽后，我又找到了元素的方法show() 和 hide( ) 经过实践还是很好用的 

其实这5种方法没有优劣 只是适用的场景不同罢了 开始我光想到了 元素的属性 没有想到元素的方法