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

JS实现的用来对比两个用指定分隔符分割的字符串是否相同

Sep 19 Javascript

javascript动态修改Li节点值的方法

Jan 20 Javascript

简单介绍JavaScript的变量和数据类型

Jun 03 Javascript

jQuery实现鼠标跟随效果

Feb 20 Javascript

Bootstrap栅格系统使用方法及页面调整变形的解决方法

Mar 10 Javascript

移动端效果之Swiper详解

Oct 09 Javascript

详解Vue调用手机相机和相册以及上传

May 05 Javascript

TypeScript类型声明书写详解

Aug 28 Javascript

基于form-data请求格式详解

Oct 29 Javascript

Vue防止白屏添加首屏动画的实例

Oct 31 Javascript

Vue中inheritAttrs的使用实例详解

Dec 31 Vue.js

gojs实现蚂蚁线动画效果

Feb 18 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/04 PHP

php+ajax实现商品对比功能示例

2019/04/13 PHP

关于Yii2框架跑脚本时内存泄漏问题的分析与解决

2019/12/01 PHP

javascript Base类包含基本的方法

2009/07/22 Javascript

限制文本框输入N个字符的js代码

2010/05/13 Javascript

基于jquery实现漂亮的动态信息提示效果

2011/08/02 Javascript

javascript使用百度地图api和html5特性获取浏览器位置

2014/01/10 Javascript

JavaScript实现打开链接页面的方式汇总

2016/06/02 Javascript

js中json处理总结之JSON.parse

2016/10/14 Javascript

遍历js中对象的属性和值的实例

2016/11/21 Javascript

Vue.js -- 过滤器使用总结

2017/02/18 Javascript

Angular4的输入属性与输出属性实例详解

2017/11/29 Javascript

详解 vue better-scroll滚动插件排坑

2018/02/08 Javascript

JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

2018/05/26 Javascript

Python的Flask框架及Nginx实现静态文件访问限制功能

2016/06/27 Python

Python实现将SQLite中的数据直接输出为CVS的方法示例

2017/07/13 Python

浅析Python中的赋值和深浅拷贝

2017/08/15 Python

在Python的一段程序中如何使用多次事件循环详解

2017/09/07 Python

对python多线程SSH登录并发脚本详解

2019/02/14 Python

Python基于mysql实现学生管理系统

2019/02/21 Python

python-itchat 获取微信群用户信息的实例

2019/02/21 Python

Python3常用内置方法代码实例

2019/11/18 Python

python 实现return返回多个值

2019/11/19 Python

python pygame实现球球大作战

2019/11/25 Python

Python变量作用域LEGB用法解析

2020/02/04 Python

土耳其家居建材网站：Koçtaş

2016/11/22 全球购物

学院领导推荐信

2013/10/30 职场文书

翻译学院毕业生自荐书

2014/02/02 职场文书

《卖木雕的少年》教学反思

2014/04/11 职场文书

敬老院献爱心活动总结

2014/07/08 职场文书

医院合作协议书

2014/08/19 职场文书

教师自我剖析材料（群众路线）

2014/09/29 职场文书

高校群众路线教育实践活动剖析材料

2014/10/10 职场文书

大学毕业典礼致辞

2015/07/29 职场文书

董事长新年致辞

2015/07/29 职场文书

Meta增速拉垮，元宇宙难当重任

2022/04/29 数码科技