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

避免 showModalDialog 弹出新窗体的原因分析

May 31 Javascript

jquery触发a标签跳转事件示例代码

Jul 21 Javascript

使用apply方法实现javascript中的对象继承

Dec 16 Javascript

JavaScript控制图片加载完成后调用回调函数的方法

Mar 20 Javascript

浅谈Jquery核心函数

Jun 18 Javascript

利用jQuery设计一个简单的web音乐播放器的实例分享

Mar 08 Javascript

AngularJS监听路由的变化示例代码

Sep 23 Javascript

微信小程序实现拖拽事件监听实例详解

Nov 16 Javascript

JS实现密码框的显示密码和隐藏密码功能示例

Dec 26 Javascript

jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

Jul 08 jQuery

Vue data的数据响应式到底是如何实现的

Feb 11 Javascript

微信小程序云函数添加数据到数据库的方法

Mar 04 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

用phpmyadmin更改mysql5.0登录密码

2008/03/25 PHP

PHP中10个不常见却非常有用的函数

2010/03/21 PHP

javascript flash下fromCharCode和charCodeAt方法使用说明

2008/01/12 Javascript

简单的JS多重继承示例

2008/03/13 Javascript

可以将word转成html的js代码

2010/04/11 Javascript

JQuery 动态扩展对象之另类视角

2010/05/25 Javascript

JS下载文件|无刷新下载文件示例代码

2014/04/17 Javascript

jquery动态改变form属性提交表单

2014/06/03 Javascript

SuperSlide标签切换、焦点图多种组合插件

2015/03/14 Javascript

javascript版2048小游戏

2015/03/18 Javascript

JavaScript encodeURI 和encodeURIComponent

2015/12/04 Javascript

移动端一个简单易懂的弹出框

2016/07/06 Javascript

knockoutjs动态加载外部的file作为component中的template数据源的实现方法

2016/09/01 Javascript

AngularJs ng-repeat 嵌套如何获取外层$index

2016/09/21 Javascript

jstl中判断list中是否包含某个值的简单方法

2016/10/14 Javascript

js实现拖拽上传图片功能

2017/08/01 Javascript

js es6系列教程 - 新的类语法实战选项卡(详解)

2017/09/02 Javascript

vue的列表交错过渡实现代码示例

2019/05/05 Javascript

JS document文档的简单操作完整示例

2020/01/13 Javascript

js代码实现轮播图

2020/05/04 Javascript

针对Vue路由history模式下Nginx后台配置操作

2020/10/22 Javascript

JS创建自定义对象的六种方法总结

2020/12/15 Javascript

深入了解Django View（视图系统）

2019/07/23 Python

python logging日志模块原理及操作解析

2019/10/12 Python

keras 特征图可视化实例(中间层)

2020/01/24 Python

python3 自动打印出最新版本执行的mysql2redis实例

2020/04/09 Python

python实现五子棋程序

2020/04/24 Python

Python 绘制可视化折线图

2020/07/22 Python

鼠标滚轮事件和Mac触控板双指事件

2019/12/23 HTML / CSS

迪奥美国官网：Dior美国

2019/12/07 全球购物

大学军训自我鉴定

2013/12/15 职场文书

社区健康教育实施方案

2014/03/18 职场文书

公务员更新知识培训实施方案

2014/03/31 职场文书

应聘会计求职信

2014/06/11 职场文书

2014年后勤工作总结

2014/11/18 职场文书

3招让你摆脱即兴讲话冷场尴尬

2019/08/08 职场文书