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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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强制下载PDF文件示例
2014/01/17 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JS二分查找算法详解
2017/11/01 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
Python实现的最近最少使用算法
2015/07/10 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
开门红主持词
2014/04/02 职场文书
爱护花草树木的标语
2014/06/11 职场文书
优秀班主任申报材料
2014/12/16 职场文书
2014年生产部工作总结
2014/12/17 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android