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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
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中使用灵巧的体系结构
2006/10/09 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
小试小程序云开发(小结)
2019/06/06 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
优秀党员获奖感言
2014/02/18 职场文书
教育技术职业规划范文
2014/03/04 职场文书
中国入世承诺
2014/04/01 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python