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

讨论javascript(一)工厂方式 js面象对象的定义方法

Dec 15 Javascript

jquery中ajax学习笔记4

Oct 16 Javascript

浅谈javascript的原型继承

Jul 25 Javascript

js 获取class的元素的方法以及创建方法getElementsByClassName

Mar 11 Javascript

Jquery插件分享之气泡形提示控件grumble.js

May 20 Javascript

JavaScript中的ArrayBuffer详细介绍

Dec 08 Javascript

JS仿hao123导航页面图片轮播效果

Sep 01 Javascript

完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

Apr 25 Javascript

vue项目上传Github预览的实现示例

Nov 06 Javascript

vue实现微信获取用户信息的方法

Mar 21 Javascript

swiper4实现移动端导航切换

Oct 16 Javascript

基于vue 动态菜单刷新空白问题的解决

Aug 06 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的FTP学习（一）

2006/10/09 PHP

PHP 5.0对象模型深度探索之对象复制

2008/03/27 PHP

php实现的click captcha点击验证码类实例

2014/09/23 PHP

yii2.0整合阿里云oss的示例代码

2017/09/19 PHP

JS实现点击下载的小例子

2013/07/10 Javascript

Javascript中的Prototype到底是什么

2016/02/16 Javascript

深入理解setTimeout函数和setInterval函数

2016/05/20 Javascript

jQuery的ajax和遍历数组json实例代码

2016/08/01 Javascript

详解Nodejs基于mongoose模块的增删改查的操作

2016/12/21 NodeJs

设置cookie指定时间失效(实例代码)

2017/05/28 Javascript

vue组件（全局，局部，动态加载组件）

2018/09/02 Javascript

js核心基础之构造函数constructor用法实例分析

2019/05/11 Javascript

微信小程序通过一个json实现分享朋友圈图片

2019/09/03 Javascript

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

2019/10/15 Javascript

JS 获取文件后缀，判断文件类型(比如是否为图片格式)

2020/05/09 Javascript

python re正则表达式模块(Regular Expression)

2014/07/16 Python

python在windows命令行下输出彩色文字的方法

2015/03/19 Python

编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法

2016/01/20 Python

python使用 HTMLTestRunner.py生成测试报告

2017/10/20 Python

使用Flask集成bootstrap的方法

2018/07/24 Python

Linux下多个Python版本安装教程

2018/08/15 Python

Python wxpython模块响应鼠标拖动事件操作示例

2018/08/23 Python

python之cv2与图像的载入、显示和保存实例

2018/12/05 Python

Falsk 与 Django 过滤器的使用与区别详解

2019/06/04 Python

python 19个值得学习的编程技巧

2020/08/15 Python

CSS3 3D酷炫立方体变换动画的实现

2019/03/26 HTML / CSS

H5 canvas中width、height和style的宽高区别详解

2018/11/02 HTML / CSS

html5之Canvas路径绘图、坐标变换应用实例

2012/12/26 HTML / CSS

销售业务实习自我鉴定

2013/09/23 职场文书

动漫专业高职生职业生涯规划书

2014/02/15 职场文书

学雷锋演讲稿

2014/03/04 职场文书

感恩节活动策划方案

2014/05/16 职场文书

2014光棍节单身联谊活动策划书

2014/10/10 职场文书

护理自荐信

2019/05/14 职场文书

python调用ffmpeg命令行工具便捷操作视频示例实现过程

2021/11/01 Python

在Centos 8.0中安装Redis服务器的教程详解

2022/03/21 Redis