编程 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 - HTML的request类

Jul 15 Javascript

js解决弹窗问题实现班级跳转DIV示例

Jan 06 Javascript

JS中创建函数的三种方式及区别

Mar 13 Javascript

js原生实现FastClick事件的实例

Nov 20 Javascript

微信小程序之ES6与事项助手的功能实现

Nov 30 Javascript

微信小程序图片边框解决方法

Jan 16 Javascript

微信小程序 flex实现导航实例详解

Apr 26 Javascript

Angular 4.X开发实践中的踩坑小结

Jul 04 Javascript

微信小程序实现复选框效果

Dec 28 Javascript

JavaScript使用ul中li标签实现删除效果

Apr 15 Javascript

Vue常用的全选/反选的示例代码

Feb 19 Javascript

如何用JS模拟实现数组的map方法

Jul 30 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的性能

2013/10/30 PHP

PHP面相对象中的重载与重写

2017/02/13 PHP

PHP中单例模式与工厂模式详解

2017/02/17 PHP

浅谈PHP中new self()和new static()的区别

2017/08/11 PHP

HTML页面如何象ASP一样接受参数

2007/02/07 Javascript

js CSS操作方法集合

2008/10/31 Javascript

js完美的div拖拽实例代码

2014/01/22 Javascript

iframe如何动态创建及释放其所占内存

2014/09/03 Javascript

Nodejs实现的一个静态服务器实例

2014/12/06 NodeJs

深入理解JavaScript中的call、apply、bind方法的区别

2016/05/30 Javascript

JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

2016/08/02 Javascript

详解数组Array.sort()排序的方法

2020/05/09 Javascript

vue.js移动端app实战1：初始配置详解

2017/07/24 Javascript

解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

2019/11/29 Javascript

JS实现纵向轮播图（初级版）

2020/01/18 Javascript

Ant Design Pro 之 ProTable使用操作

2020/10/31 Javascript

[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局

2016/02/27 DOTA

[03:59]5分钟带你了解什么是DOTA2（第二期）

2017/02/07 DOTA

Python3.2模拟实现webqq登录

2016/02/15 Python

Python pass详细介绍及实例代码

2016/11/24 Python

python 去除二维数组/二维列表中的重复行方法

2019/01/23 Python

Python3 venv搭建轻量级虚拟环境的步骤(图文)

2019/08/09 Python

浅谈python print(xx, flush = True) 全网最清晰的解释

2020/02/21 Python

python实现程序重启和系统重启方式

2020/04/16 Python

keras .h5转移动端的.tflite文件实现方式

2020/05/25 Python

详解Django中的FBV和CBV对比分析

2021/03/01 Python

运行时异常与一般异常有何异同？

2014/01/05 面试题

什么是反射？如何实现反射？

2016/07/25 面试题

农药学硕士毕业生自荐信

2013/09/25 职场文书

小学开学寄语

2014/01/19 职场文书

高效课堂标语

2014/06/26 职场文书

小学数学教研活动总结

2014/07/01 职场文书

2014高中生入党思想汇报范文

2014/09/13 职场文书

主持人开场白台词

2015/05/29 职场文书

Python 实现定积分与二重定积分的操作

2021/05/26 Python

Python中Selenium对Cookie的操作方法

2021/07/09 Python