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

JsEasy简介 JsEasy是什么?与下载

Mar 07 Javascript

经常用到的JavasScript事件的翻译

Apr 09 Javascript

Bootstrap复选框和单选按钮美化插件(推荐)

Nov 23 Javascript

微信小程序标签传入数据

May 08 Javascript

jQuery查找dom的几种方法效率详解

May 17 jQuery

Bootstrap table使用方法记录

Aug 23 Javascript

微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

Dec 15 Javascript

vue.js学习笔记之v-bind和v-on解析

May 03 Javascript

原生JS实现自定义下拉单选选择框功能

Oct 12 Javascript

vue tab切换,解决echartst图表宽度只有100px的问题

Jul 19 Javascript

原生js生成图片验证码

Oct 11 Javascript

vue下拉刷新组件的开发及slot的使用详解

Dec 23 Vue.js

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 验证身份证是否合法的函数

2017/02/09 PHP

PHP生成随机码的思路与方法实例探索

2019/04/11 PHP

Display SQL Server Version Information

2007/06/21 Javascript

javascript实现的在当前窗口中漂浮框的代码

2010/03/15 Javascript

用jquery和json从后台获得数据集的代码

2011/11/07 Javascript

js改变img标签的src属性在IE下没反应的解决方法

2013/07/23 Javascript

javascript使用正则获取url上的某个参数

2014/09/04 Javascript

基于Node.js实现nodemailer邮件发送

2016/01/26 Javascript

浅谈JavaScript变量的自动转换和语句

2016/06/12 Javascript

详解node如何让一个端口同时支持https与http

2017/07/04 Javascript

利用JS制作万年历的方法

2017/08/16 Javascript

基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

2018/01/17 Javascript

基于Vue组件化的日期联动选择器功能的实现代码

2018/11/30 Javascript

微信小程序-form表单提交代码实例

2019/04/29 Javascript

javascript将16进制的字符串转换为10进制整数hex

2020/03/05 Javascript

Python 26进制计算实现方法

2015/05/28 Python

Python实现基本数据结构中队列的操作方法示例

2017/12/04 Python

python 使用值来排序一个字典的方法

2018/11/16 Python

python实现二维数组的对角线遍历

2019/03/02 Python

Python3实现将一维数组按标准长度分隔为二维数组

2019/11/29 Python

Selenium基于PIL实现拼接滚动截图

2020/04/10 Python

什么是python类属性

2020/06/10 Python

pycharm 配置svn的图文教程(手把手教你)

2021/01/15 Python

世界上最大的乐器零售商：Guitar Center

2017/11/07 全球购物

水果花束：Fruit Bouquets

2017/12/20 全球购物

什么是.net

2015/08/03 面试题

介绍一下MD5加密算法

2016/11/12 面试题

怎么样写好简历中的自我评价

2013/10/25 职场文书

婚礼主持词

2014/03/13 职场文书

个人培训总结

2015/03/05 职场文书

vue-cropper组件实现图片切割上传

2021/05/27 Vue.js

Python还能这么玩之用Python做个小游戏的外挂

2021/06/04 Python

总结一些Java常用的加密算法

2021/06/11 Java/Android

Python使用海龟绘图实现贪吃蛇游戏

2021/06/18 Python

python实现Nao机器人的单目测距

2021/09/04 Python

Java数组详细介绍及相关工具类

2022/04/14 Java/Android