编程 Javascript

实例详解display:none与visible:hidden的区别

Posted in Javascript onMarch 30, 2017

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

例子：

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

实例详解display:none与visible:hidden的区别

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高

Mar 09 Javascript

javascript 学习之旅（1）

Feb 05 Javascript

Javascript 判断客户端浏览器类型代码

Mar 01 Javascript

自动设置iframe大小的jQuery代码

Sep 11 Javascript

web css实现整站样式互相切换

Oct 29 Javascript

jquery ajaxSubmit 异步提交的简单实现

Feb 28 Javascript

jQuery实现的网页右下角tab样式在线客服效果代码

Oct 23 Javascript

Bootstrap fileinput组件封装及使用详解

Mar 10 Javascript

Easyui Datagrid自定义按钮列(最后面的操作列)

Jul 13 Javascript

基于D3.js实现时钟效果

Jul 17 Javascript

详解react native页面间传递数据的几种方式

Nov 07 Javascript

Element的el-tree控件后台数据结构的生成以及方法的抽取

Mar 05 Javascript

JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

Mar 30 #Javascript

基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )

Mar 30 #Javascript

基于jquery实现二级联动效果

Mar 30 #jQuery

javascript中的面向对象

Mar 30 #Javascript

详解JavaScript对象的深浅复制

Mar 30 #Javascript

js实现不提示直接关闭网页窗口

Mar 30 #Javascript

jquery中关于bind()方法的使用技巧分享

Mar 30 #jQuery

You might like

php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值

2011/10/31 PHP

php实现将HTML页面转换成word并且保存的方法

2016/10/14 PHP

深入浅出讲解：php的socket通信原理

2016/12/03 PHP

docker-compose部署php项目实例详解

2019/07/30 PHP

php模拟post提交请求调用接口示例解析

2020/08/07 PHP

不同浏览器对回车提交表单的处理办法

2010/02/13 Javascript

浅谈js中字符和数组一些基本算法题

2016/08/15 Javascript

Element Input组件分析小结

2018/10/11 Javascript

ES6知识点整理之函数对象参数默认值及其解构应用示例

2019/04/17 Javascript

jQuery操作attr、prop、val()/text()/html()、class属性

2019/05/23 jQuery

一文了解vue-router之hash模式和history模式

2019/05/31 Javascript

详解Vue中的MVVM原理和实现方法

2020/07/15 Javascript

Vue仿百度搜索功能

2020/12/28 Vue.js

Python 正则表达式(转义问题)

2014/12/15 Python

Python定时器实例代码

2017/11/01 Python

Python numpy生成矩阵、串联矩阵代码分享

2017/12/04 Python

python实现雪花飘落效果实例讲解

2019/06/18 Python

python Django 创建应用过程图示详解

2019/07/29 Python

基于python traceback实现异常的获取与处理

2019/12/13 Python

python多进程使用函数封装实例

2020/05/02 Python

Python如何输出整数

2020/06/07 Python

移动端rem布局的两种实现方法

2018/01/03 HTML / CSS

基于html5实现的图片墙效果

2014/10/16 HTML / CSS

英国Boots旗下太阳镜网站：Boots Designer Sunglasses

2018/07/07 全球购物

递归实现回文判断（如：abcdedbca就是回文，判断一个面试者对递归理解的简单程序）

2013/04/28 面试题

即将毕业大学生自荐信

2014/01/24 职场文书

工作年限证明模板

2014/11/01 职场文书

2014年学校财务工作总结

2014/12/06 职场文书

2014年英语工作总结

2014/12/20 职场文书

大学生考试作弊被抓检讨书

2014/12/27 职场文书

质量保证书怎么写

2015/02/27 职场文书

军事博物馆观后感

2015/06/05 职场文书

2016年七夕爱情寄语

2015/12/04 职场文书

2016年庆祝六一儿童节活动总结

2016/04/06 职场文书

2019年最新借条范本！

2019/07/08 职场文书

python异常中else的实例用法

2021/06/15 Python