display和visibility的区别示例介绍


Posted in Javascript onFebruary 26, 2014

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。

display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。

看例子即可明白:

<div id="myDiv" style="width:100px;border:1px solid #aaa;"> 
<p> </p> 
</div> 
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可见visibility" /> 
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可见display" /> 
<script> 
function isVisibility(me){ 
if (me.style.visibility=="hidden"){ 
me.style.visibility="visible"; } 
else{ 
me.style.visibility="hidden"; 
} 
} 
function isDisplay(me){ 
if (me.style.display=="none"){ 
me.style.display="block"; } 
else{ 
me.style.display="none"; 
} 
} 
</script>
Javascript 相关文章推荐
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
Angular2数据绑定详解
Apr 18 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
js 赋值包含单引号双引号问题的解决方法
Feb 26 #Javascript
js返回上一页并刷新的多种实现方法
Feb 26 #Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 #Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 #Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 #Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 #Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 #Javascript
You might like
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python中的super用法详解
2015/05/28 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python学习思维导图(必看篇)
2017/06/26 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python 日期排序的实例代码
2019/07/11 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
基于python检查矩阵计算结果
2020/05/21 Python
python中sys模块是做什么用的
2020/08/16 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
小学生自我鉴定
2013/10/12 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
保护野生动物倡议书
2014/05/16 职场文书
社区反邪教工作方案
2014/06/16 职场文书
初婚未育证明样本
2015/06/18 职场文书
Pandas自定义选项option设置
2021/07/25 Python