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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
mocha的时序规则讲解
Feb 16 Javascript
微信小程序实现批量倒计时功能
Nov 01 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php url路由入门实例
2014/04/23 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
详解Node 定时器
2018/02/26 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue组件与复用详解
2018/04/08 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
工作表扬信
2015/01/17 职场文书
颐和园的导游词
2015/01/30 职场文书
公司财务经理岗位职责
2015/04/08 职场文书