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

eval与window.eval的差别分析

Mar 17 Javascript

解决JQeury显示内容没有边距内容紧挨着浏览器边线

Dec 20 Javascript

js 获取页面高度和宽度兼容 ie firefox chrome等

May 14 Javascript

node.js中实现同步操作的3种实现方法

Dec 05 Javascript

第六章之辅组类与响应式工具

Apr 25 Javascript

学习JavaScript图片预加载模块

Nov 07 Javascript

jQuery用noConflict代替$的实现方法

Apr 12 jQuery

ES6新特性八：async函数用法实例详解

Apr 21 Javascript

使用JQuery实现图片轮播效果的实例(推荐)

Oct 24 jQuery

浅谈Vue.nextTick 的实现方法

Oct 25 Javascript

vue项目中实现的微信分享功能示例

Jan 21 Javascript

vuex实现数据状态持久化

Nov 11 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

WordPress中使主题支持小工具以及添加插件启用函数

2015/12/22 PHP

php 数据结构之链表队列

2017/10/17 PHP

php7 图形用户界面GUI 开发示例

2020/02/22 PHP

javascript Discuz代码中的msn聊天小功能

2008/05/25 Javascript

jquery Mobile入门—外部链接切换示例代码

2013/01/08 Javascript

jquery获取特定name所有选中的checkbox,支持IE9标准模式

2013/03/18 Javascript

jquery中each遍历对象和数组示例

2014/08/05 Javascript

自己封装的一个原生JS拖动方法(推荐)

2016/11/22 Javascript

利用Js+Css实现折纸动态导航效果实例源码

2017/01/25 Javascript

JavaScript下拉菜单功能实例代码

2017/03/01 Javascript

p5.js 毕达哥拉斯树的实现代码

2018/03/23 Javascript

vue2配置scss的方法步骤

2019/06/06 Javascript

python原始套接字编程示例分享

2014/02/21 Python

python标准算法实现数组全排列的方法

2015/03/17 Python

pyenv命令管理多个Python版本

2017/03/26 Python

python机器学习实战之K均值聚类

2017/12/20 Python

Python3 queue队列模块详细介绍

2018/01/05 Python

Anaconda2下实现Python2.7和Python3.5的共存方法

2018/06/11 Python

Python使用itchat模块实现群聊转发，自动回复功能示例

2019/08/26 Python

win10安装tensorflow-gpu1.8.0详细完整步骤

2020/01/20 Python

python计算Content-MD5并获取文件的Content-MD5值方式

2020/04/03 Python

在django中form的label和verbose name的区别说明

2020/05/20 Python

Python使用grequests并发发送请求的示例

2020/11/05 Python

Python 可视化神器Plotly详解

2020/12/26 Python

html5 web本地存储将取代我们的cookie

2012/12/26 HTML / CSS

为你的html5网页添加音效示例

2014/04/03 HTML / CSS

女士和男士时尚鞋在线购物：Shoespie

2019/02/28 全球购物

Janie and Jack美国官网：GAP旗下的高档童装品牌

2019/09/09 全球购物

教师队伍管理制度

2014/01/14 职场文书

营销学习心得体会

2014/09/12 职场文书

文明单位创建材料

2014/12/24 职场文书

公司捐书倡议书

2015/04/27 职场文书

2015年青年教师工作总结

2015/05/25 职场文书

pytorch 如何使用amp进行混合精度训练

2021/05/24 Python

Mysql多层子查询示例代码(收藏夹案例)

2022/03/31 MySQL

Vue3实现简易音乐播放器组件

2022/08/14 Vue.js