编程 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 相关文章推荐

对象特征检测法判断浏览器对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