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. SqlServer基础语句练习(一)

    学了不少东西,感觉自己的sql语句还是很不好,从基础学起吧. 来一段sql脚本: create database tongji go use tongji go create table studen ...

  2. 【APUE | 10】函数signal

    函数signal 函数signal介绍 typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t ...

  3. hdu 1588 求f(b) +f(k+b) +f(2k+b) +f((n-1)k +b) 之和 (矩阵快速幂)

    g(i)=k*i+b; 0<=i<nf(0)=0f(1)=1f(n)=f(n-1)+f(n-2) (n>=2)求f(b) +f(k+b) +f(2*k+b) +f((n-1)*k + ...

  4. mySQL 增量备份方案

    1.在 /etc/my.cnf 下面设置开启bin-log 编辑 vim /etc/my.cnf [mysqld] binlog_format       = MIXED                ...

  5. binlog和redo log日志提交

    组提交(group commit)是MYSQL处理日志的一种优化方式,主要为了解决写日志时频繁刷磁盘的问题.组提交伴随着MYSQL的发展不断优化,从最初只支持redo log 组提交,到目前5.6官方 ...

  6. 【AtCoder】CODE FESTIVAL 2017 qual A

    A - Snuke's favorite YAKINIKU -- #include <bits/stdc++.h> #define fi first #define se second # ...

  7. python全栈开发day35-线程、协程

    一.线程 1.线程 1).什么是线程 线程是cpu调度的最小单位 线程是进程的必要组成单位 一个进程里至少含有一个线程 2).主线程 程序开始运行的视乎,就产生了一个主线程来运行这个程序 3).子线程 ...

  8. Ubuntu/Linux网络配置常用命令

    配置ip 打开配置文件 sudo vim /etc/network/interfaces # This file describes the network interfaces available ...

  9. JQuery框架2.位置属性|筛选方法|事件

    1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...

  10. 在VS代码中编辑Python

    在VS代码中编辑Python Python扩展提供了许多用于在Visual Studio代码中编辑Python源代码的功能: 自动完成和智能感知 在终端中运行选择/行(REPL) 格式化 重构 也见L ...