html中使元素不可见有三种方法:

  • 使用hidden属性
  • 使用style中的display=none
  • 使用style中的visibility=false

显然,使元素不可见有两类方式:

  • 元素彻底不可见,元素不会占据空间,仿佛消失了一样
  • 元素不可见,但是依旧占据着原来的空间,仿佛隐形了一样

使用hidden属性

<div hidden>hello</div>

使用hidden属性的效果就是在渲染DOM时,会自动把该元素的display属性改为none。注意,hidden属性的唯一用途就在此处:只在第一次添加hidden属性时把display改为none。以后即便display属性变成了block,hidden属性依旧在那里放着。

由此可知,hidden和display=none产生的效果是相同的。但是不如display更直接、更根本。因此,以后不要使用hidden属性,直接访问style中的display属性。

使用style.display

jQuery中的hide、show、toggle等控制显示和隐藏的方法就是使用display属性。

display=none能够让一个元素彻底消失,无影无踪,不占空间。

使用style.visibility

style中的visibility=false时,元素像隐形了一样,但是依旧占据原来的空间。

html元素不可见的三种方式的更多相关文章

  1. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. Java修炼——ArrayList常用的方法以及三种方式遍历集合元素。

    List接口ArrayList用法详解 ArrayList常用方法: 1. List.add():添加的方法(可以添加字符串,常量,以及对象) List list=new ArrayList(); l ...

  4. Java 数组元素逆序Reverse的三种方式

    Java 数组元素逆序Reverse的三种方式   本文链接:https://blog.csdn.net/xHibiki/article/details/82930521 题目 代码实现 说明 int ...

  5. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  6. 获得 LayoutInflater 实例的三种方式

    在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于findViewById().不同点是LayoutInflater是用来找res/layout/下的xml布局文件,并且实例 ...

  7. [转]获得 LayoutInflater 实例的三种方式

    转自:http://www.cnblogs.com/androidez/archive/2013/07/01/3164729.html 获得 LayoutInflater 实例的三种方式   在实际开 ...

  8. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  9. HTML5实现动画三种方式

    编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...

随机推荐

  1. HDU 3746 将字符串的全部字符最少循环2次需要添加的字符数

    Sample Input3aaaabcaabcde Sample Output025 题目大意:给你一个字符串,要求将字符串的全部字符最少循环2次需要添加的字符数.例子:abcabc 已经循环2次,添 ...

  2. #12【BZOJ3003】LED BFS+状压DP

    题解: 看到区间修改先想一下差分 这题用差分是为了分析问题 现在的问题就变成了 原序列全为0,要使得特定的k个点变为1,每个操作改变x,y+1 然后我们会发现 对于二元组a,b我们要修改它,实际上是在 ...

  3. linux下实现shell脚本自动连接mongodb数据库并创建索引

    在linux下创建shell脚本

  4. 逃离迷宫 HDU1728 (bfs)

    和连连看非常相似   都是求转向的BFS 改了一下就上交了... #include<cstdio> #include<cstring> #include<algorith ...

  5. 004.Kickstart部署之FTP架构

    一 准备 1.1 完整架构:Kickstart+DHCP+VSFTP+TFTP+PXE 1.2 组件应用 Kickstart服务端IP:172.24.8.12 DHCP:提供客户端IP,网关,镜像路径 ...

  6. Solution for unable to create "dead-letter-exchange" in RabbitMQ

    在参考 Dead-Letter-Exchange 进行Dead-letter-exchange的理解, 在本地时,想要创建 Dead-letter-exchange 时,一直报错,错误如下: Unha ...

  7. Git中的bash与CMD的区别

    Windows在使用git工具时,可以看到有两个命令输入窗: 1. Git CMD 2. Git Bash 两者的区别:Bash是基于CMD的,Bash在CMD的基础上新增了一些命令和功能,故建议使用 ...

  8. NTFS的交换数据流ADS应用

    NTFS的交换数据流ADS应用   NTFS是Windows常用的文件系统格式.该格式支持交换数据流(Alternate Data Streams,缩写ADS)特性.该特性可以让多个文件流使用同一个文 ...

  9. react输入 撤销

    销毁阶段可以使用的函数:componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器.因为这些函数都是开发者手动加上去的,react不知道,必须进行手动清理. 实例第一 ...

  10. android db 导入 手机 系统 目录 data/data/包名/databases

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha ======== 需要权限, 权限不足. 就算root之后,把这些都改成了777权限,仍 ...