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

新浪中用来显示flash的函数

Apr 02 Javascript

jQuery弹出层始终垂直居中相对于屏幕或当前窗口

Apr 01 Javascript

jQuery .tmpl() 用法示例介绍

Aug 21 Javascript

vue2.0父子组件间通信的实现方法

Apr 19 Javascript

详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用

Aug 23 Javascript

vue组件表单数据回显验证及提交的实例代码

Aug 30 Javascript

JS使用new操作符创建对象的方法分析

May 30 Javascript

在vue中高德地图引入和轨迹的绘制的实现

Oct 11 Javascript

js实现提交前对列表数据的增删改查

Jan 16 Javascript

详解JS预解析原理

Jun 16 Javascript

使用React-Router实现前端路由鉴权的示例代码

Jul 26 Javascript

vue集成openlayers加载geojson并实现点击弹窗教程

Sep 24 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使用codebase生成随机数

2014/03/25 PHP

php实现文件下载代码分享

2014/08/19 PHP

php关闭warning问题的解决方法

2016/05/17 PHP

php批量删除操作（数据访问）

2017/05/23 PHP

基于json的jquery地区联动效果代码

2011/07/06 Javascript

一个简单的js树形菜单

2011/12/09 Javascript

使用javascipt---实现二分查找法

2013/04/10 Javascript

关于js遍历表格的实例

2013/07/10 Javascript

javascript字符串循环匹配实例分析

2015/07/17 Javascript

JavaScript仿静态分页实现方法

2015/08/04 Javascript

javascript中offset、client、scroll的属性总结

2015/08/13 Javascript

fullCalendar中文API官方文档

2017/02/07 Javascript

JavaScript与Java正则表达式写法的区别介绍

2017/08/15 Javascript

原生js实现简单的模态框示例

2017/09/08 Javascript

在Vue中使用axios请求拦截的实现方法

2018/10/25 Javascript

微信小程序API—获取定位的详解

2019/04/30 Javascript

atom-design(Vue.js移动端组件库)手势组件使用教程

2019/05/16 Javascript

vue实现设置载入动画和初始化页面动画效果

2019/10/28 Javascript

Python实现获取汉字偏旁部首的方法示例【测试可用】

2018/12/18 Python

python使用zip将list转为json的方法

2018/12/31 Python

详解Django+uwsgi+Nginx上线最佳实战

2019/03/14 Python

使用Python画股票的K线图的方法步骤

2019/06/28 Python

python实现的批量分析xml标签中各个类别个数功能示例

2019/12/30 Python

Pytorch中膨胀卷积的用法详解

2020/01/07 Python

Python设计密码强度校验程序

2020/07/30 Python

Python 发送邮件方法总结

2020/08/10 Python

五分钟学会怎么用Pygame做一个简单的贪吃蛇

2021/01/06 Python

HTML5使用DOM进行自定义控制示例代码

2013/06/08 HTML / CSS

Oroton中国官网：澳洲知名奢侈配饰品牌

2017/03/26 全球购物

韩国演唱会订票网站：StubHub韩国

2019/01/17 全球购物

会计专业毕业生自荐信范文

2013/12/20 职场文书

公司企业表扬信

2014/01/11 职场文书

关于抽烟的检讨书

2014/02/25 职场文书

模特大赛策划方案

2014/05/28 职场文书

2016年公司新年寄语

2015/08/17 职场文书

python数字图像处理数据类型及颜色空间转换

2022/06/28 Python