实例详解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>

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

Javascript 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
json字符串传到前台input的方法
Aug 06 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
Rust中的Struct使用示例详解
Aug 14 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代码
2010/02/16 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP中header用法小结
2016/05/23 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
PHP实现计算器小功能
2020/08/28 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
SQL Server面试题
2013/04/04 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
2016年春节问候语
2015/11/11 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
2016年教代会开幕词
2016/03/04 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android