HTML页面元素的隐藏方法
今天我在做地勘局管理系统时, 需要解决一个表格的筛选功能, 只是前段的功能 不涉及数据库。 这就需要用到HTML 元素的隐藏和显示了, 所以我搜罗了很多关于隐藏和显示的方法。下面罗列一下:1、 元素的display属性:none 此元素不会被显示。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值)
今天我在做地勘局管理系统时, 需要解决一个表格的筛选功能, 只是前段的功能 不涉及数据库。 这就需要用到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种方法没有优劣 只是适用的场景不同罢了 开始我光想到了 元素的属性 没有想到元素的方法
更多推荐
所有评论(0)