display和visibility的区别示例介绍
更新时间：2014年02月26日 16:09:36 作者：
这篇文章主要介绍了display和visibility的区别,需要的朋友可以参考下
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>
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>
相关文章
利用js正则表达式验证手机号,email地址,邮政编码。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了ES6字符串的扩展实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本文代码使用 JavaScript。 一些同学对递归的理解还停留在“是一种求阶乘比循环低效的方法”。但其实递归和循环处理的问题是不同。拿“遍历数组”这个问题来说：循环适合同一维度（单层长度不限）上的遍历，而递归则适合跨维度（层数不限）的遍历。2013-02-02
Map与WeakMap类型在JavaScript中的使用详解
这篇文章主要介绍了Map与WeakMap类型在JavaScript中的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
页面滚动条处于低端,点击回到顶部，并且隐藏掉，具体实现代码如下，感兴趣的朋友可以参考下哈2013-06-06
链式调用就是调用对象的方法后返回到该对象，严格来讲它并不属于语法，而只是一种语法技巧，js令人着迷的一点就是这里。2010-02-02
Javascript 中的 call 和 apply使用介绍
JavaScript 中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象2012-02-02
条码是一种以机器可读的可视形式表示数据的方法,我们可以从条码获取二进制数据,并通过不同方法去读码,下面我们就来看看如何实现读取条码中的二进制数据吧2024-03-03
这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
本文主要介绍了json的基础知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论