编程 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两行代码按指定格式输出日期时间

Oct 21 Javascript

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

May 30 Javascript

BootStrap selectpicker

Jun 20 Javascript

a标签跳转到指定div,jquery添加和移除class属性的实现方法

Oct 10 Javascript

基于vue实现移动端圆形旋钮插件效果

Nov 28 Javascript

JS实现的点击按钮图片上下滚动效果示例

Jan 28 Javascript

使用js实现一个简单的滚动条过程解析

Sep 10 Javascript

jQuery表单校验插件validator使用方法详解

Feb 18 jQuery

Node.js API详解之 querystring用法实例分析

Apr 29 Javascript

基于脚手架创建Vue项目实现步骤详解

Aug 03 Javascript

vue 动态创建组件的两种方法

Dec 31 Vue.js

前端如何实现动画过渡效果

Feb 05 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中通过ADODB库实现调用Access数据库之修正版本

2006/12/31 PHP

PHP图片处理之使用imagecopyresampled函数实现图片缩放例子

2014/11/19 PHP

php在windows环境下获得cpu内存实时使用率(推荐)

2018/02/08 PHP

PHP类与对象后期静态绑定操作实例详解

2018/12/20 PHP

JavaScript 脚本将当地时间转换成其它时区

2009/03/19 Javascript

javascript 写类方式之四

2009/07/05 Javascript

基于jquery的表头固定的若干方法

2011/01/27 Javascript

jQuery怎么解析Json字符串(Json格式/Json对象)

2013/08/09 Javascript

js左侧三级菜单导航实例代码

2013/09/13 Javascript

详解Wondows下Node.js使用MongoDB的环境配置

2016/03/01 Javascript

bootstrap输入框组代码分享

2016/06/07 Javascript

解析AngularJS中get请求URL出现的跨域问题

2016/12/01 Javascript

微信小程序实现点击文字页面跳转功能【附源码下载】

2017/12/12 Javascript

JS常见内存泄漏及解决方案解析

2020/05/30 Javascript

JSON 入门教程基础篇 json入门学习笔记

2020/09/22 Javascript

用JavaScript实现贪吃蛇游戏

2020/10/23 Javascript

JavaScript实现音乐导航效果

2020/11/19 Javascript

Python实现简单的可逆加密程序实例

2015/03/05 Python

Python 异常的捕获、异常的传递与主动抛出异常操作示例

2019/09/23 Python

python 图片二值化处理（处理后为纯黑白的图片）

2019/11/01 Python

css3 按钮利用css3实现超酷下载按钮

2013/03/18 HTML / CSS

Monica Vinader官网：英国轻奢珠宝品牌

2020/02/05 全球购物

Java程序员面试题

2013/07/15 面试题

简历中个人求职的自我评价模板

2013/11/29 职场文书

公益广告宣传方案

2014/02/28 职场文书

副总经理岗位职责

2014/03/16 职场文书

节水倡议书范文

2014/04/15 职场文书

素质教育标语

2014/06/27 职场文书

银行领导班子四风对照检查材料

2014/09/27 职场文书

优秀教师先进事迹材料

2014/12/15 职场文书

运动会闭幕式致辞

2015/07/29 职场文书

六年级数学教学反思

2016/02/16 职场文书

《女娲补天》教学反思

2016/02/20 职场文书

mysql分表之后如何平滑上线详解

2021/11/01 MySQL

如何用vue实现网页截图你知道吗

2021/11/17 Vue.js

win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法

2022/04/08 数码科技