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种方法没有优劣只是适用的场景不同罢了开始我光想到了元素的属性没有想到元素的方法

HTML页面元素的隐藏方法相关推荐

（转）selenium页面元素定位八大方法_琉璃
2019独角兽企业重金招聘Python工程师标准>>> 转自:https://www.cnblogs.com/qingchunjun/p/4208159.html 在使用seleni ...
js控制页面元素的隐藏与显示
2019独角兽企业重金招聘Python工程师标准>>> <body> <div> <button οnclick='javascript:Layer ...
javascript和jquery实现页面元素显示/隐藏切换的方法
一.javascript实现方法一: document.getElementById("idname").style.visibility="hidden"; ...
微信小程序元素显示隐藏方法总结（原生）
目录前言一.css实现总结前言我们在日常开发中,或多或少的会遇见一些元素的显示隐藏的需要.这里,我们以vue来举例,在vue中,我们往往通过v-show或者v-if来控制元素的显示和隐藏.但 ...
js判断页面元素是否隐藏
代码: var display =$('#id').css('display'); if(display == 'none'){alert("我是隐藏元素!"); } 注意:需要引 ...
CSS中有哪些隐藏页面元素的方法?
目录一.前言二.隐藏页面元素的实现方法 1.利用display:none实现 2.利用visibility:hidden隐藏元素 3.利用opacity:0来隐藏元素 4.设置width,heig ...
iframe父页面与子页面之间的元素获取与方法调用
JS 父页面调用子页面子页面调用父页面元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById(&qu ...
Cypress之模拟键盘鼠标操作以及页面元素拖动操作
上篇文章讲解了使用cypress框架时,如何上传或者下载文件,以及定位操作iframe和shadow dom下的页面元素.此次课程将讲解如何模拟键盘输入.鼠标操作以及如何拖动页面元素,另外,会介绍如何 ...
操作页面元素WebElement—Selenium自动化测试指南（4）
5.5.7 XPath(xPathToFind) 如果以上查找方法都无法定位到指定对象,那么可以按XPath进行查找.例如,百度首页有文本框,如图5-35所示. 图5-35 百度搜索文本框其HT ...

HTML页面元素的隐藏方法

HTML页面元素的隐藏方法相关推荐

最新文章

热门文章