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

jQuery使用手册之一

Mar 24 Javascript

jQuery学习4 浏览器的事件模型

Feb 07 Javascript

打豆豆小游戏用javascript编写的[打豆豆]小游戏

Jan 08 Javascript

javascript实现给定半径求出圆的面积

Jun 26 Javascript

jquery实现表单验证简单实例演示

Nov 23 Javascript

AngularJS入门之动画

Jul 27 Javascript

原生js开发的日历插件

Feb 04 Javascript

微信小程序排坑指南详解

May 23 Javascript

bootstrap treeview 树形菜单带复选框及级联选择功能

Jun 08 Javascript

React学习之受控组件与数据共享实例分析

Jan 06 Javascript

关于vue的列表图片选中打钩操作

Sep 09 Javascript

浅谈JavaScript 声明提升

Sep 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的dl函数用法实例

2014/11/06 PHP

避免Smarty与CSS语法冲突的方法

2015/03/02 PHP

用php实现分页效果的示例代码

2020/12/10 PHP

飞鱼(shqlsl) javascript作品集

2006/12/16 Javascript

关于图片验证码设计的思考

2007/01/29 Javascript

js中获取事件对象的方法小结

2011/03/13 Javascript

D3.js 从P元素的创建开始(显示可加载数据)

2014/10/30 Javascript

jquery实现倒计时效果

2015/12/14 Javascript

微信小程序限制1M的瘦身技巧与方法详解

2017/01/06 Javascript

JavaScript瀑布流布局实现代码

2017/05/06 Javascript

基于pako.js实现gzip的压缩和解压功能示例

2017/06/13 Javascript

vue.js+element-ui动态配置菜单的实例

2018/09/07 Javascript

JavaScript算法学习之冒泡排序和选择排序

2019/11/02 Javascript

[02:12]2019完美世界全国高校联赛（春季赛）报名开启

2019/03/01 DOTA

详解Python的collections模块中的deque双端队列结构

2016/07/07 Python

Python实现选择排序

2017/06/04 Python

python 实现登录网页的操作方法

2018/05/11 Python

python脚本实现验证码识别

2018/06/07 Python

Python中的Numpy矩阵操作

2018/08/12 Python

python 接收处理外带的参数方法

2018/12/03 Python

安装Pycharm2019以及配置anconda教程的方法步骤

2019/11/11 Python

python判断两个序列的成员是否一样的实例代码

2020/03/01 Python

python用opencv完成图像分割并进行目标物的提取

2020/05/25 Python

CSS3实现图片抽屉式效果的示例代码

2019/11/06 HTML / CSS

html5 canvas手势解锁源码分享

2020/01/07 HTML / CSS

印尼在线购买隐形眼镜网站：Lensza.co.id

2019/04/27 全球购物

如何用Python来进行查询和替换一个文本字符串

2014/01/02 面试题

秸秆管理实施方案

2014/03/15 职场文书

创文明城市标语

2014/06/16 职场文书

2014年技术工作总结范文

2014/11/20 职场文书

2014年政协工作总结

2014/12/09 职场文书

迟到检讨书

2015/01/26 职场文书

小学教师年度个人总结

2015/02/05 职场文书

专职安全员岗位职责

2015/04/11 职场文书

公司规章制度范本

2015/08/03 职场文书

react中的DOM操作实现

2021/06/30 Javascript