在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不占据原来的位置，从文档流中脱离，后续的元素填补其位置。通过style.visibility=hidden隐藏的时候，元素仍然占据原来的位置，只是被隐藏。

下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间。

<html>

<head>

<title>test</title>

<meta http-equiv=content-type content="text/html; charset=gb2312">

<style>

.titlediv{background-color:#eee;color:white;font-weight:bold;padding:10px;cursor:pointer }

.contentdiv{border:3px solid blue;height:100px;padding:10px; }

</style>

<script type="text/javascript">

function toggle(divid){

    var odiv = document.getElementById(divid);

    odiv.style.display=(odiv.style.display=="none")?"block":"none";

}  

function showhide(divid){

    var odiv = document.getElementById(divid);

    odiv.style.visibility=(odiv.style.visibility=="visible")?"hidden":"visible";

}

</script>

</head>

<body >

    <div class="titlediv" onclick="toggle('divContetn1')">click here</div>

    <div class="contentdiv" id="divContetn1">this is some content to show and hide

    </div>

    <p> </p>

    <div class="titlediv" onclick="toggle('divContetn2')">click here</div>

    <div class="contentdiv" id="divContetn2">this is some content to show and hide

    </div>

    <p> </p>

    <div class="titlediv" onclick="showhide('divContetn3')">click here</div>

    <div class="contentdiv" id="divContetn3">this is some content to show and hide

    </div>

    <p> </p>

    <div class="titlediv" onclick="showhide('divContetn4')">click here</div>

    <div class="contentdiv" id="divContetn4">this is some content to show and hide

    </div>

</body>

</html>

JS中style.display和style.visibility的区别的更多相关文章

  1. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  2. 关于js中for in和foreach in的区别

    js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach i ...

  3. js中加“var”和不加“var”的区别

    JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...

  4. JS中构造函数和普通函数有什么区别

    JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...

  5. js中的offsetLeft和style.left

    (1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...

  6. js style.display = "" 和style.display="none" 区别

    style.display = "":是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display=&quo ...

  7. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  8. css中的display(显示)和visibility(可见性)

    display定义和用法 display 属性规定元素应该生成的框的类型. 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险, ...

  9. document.all("div).style.display = "none"与 等于""的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MySQL 高级—— 锁机制

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.锁的概述 1.锁的定义 锁是计算机协调多个进程或线程并发访问某一资源的机制. 在数据库中,除传统的计 ...

  2. css3 属性阴影效果--box-shadow,text-shadow

    1.text-shadow:h-shadow v-shadow blur color; h-shadow:水平阴影的位置,可以是负值,正值向右,负值向左 v-shadow:水平阴影的位置,可以是负值, ...

  3. Java中Iterator 和ListIterator的区别

    1.Iterator Iterator的定义如下: public interface Iterator {} Iterator是一个接口,它是集合的迭代器.集合可以通过Iterator去遍历集合中的元 ...

  4. java实现拉丁方块填数字

    "数独"是当下炙手可热的智力游戏.一般认为它的起源是"拉丁方块",是大数学家欧拉于1783年发明的. 如图[1.jpg]所示:6x6的小格被分为6个部分(图中用 ...

  5. Java实现网格中移动字母

    2x3=6个方格中放入ABCDE五个字母,右下角的那个格空着.如图[1.jpg]所示. 和空格子相邻的格子中的字母可以移动到空格中,比如,图中的C和E就可以移动,移动后的局面分别是: A B D E ...

  6. 容器技术之Docker私有镜像仓库docker-distribution

    在前边的博客中我们说到docker的架构由docker客户端.服务端以及仓库组成:docker仓库就是用来存放镜像的地方:其实docker registry我们理解为存放docker镜像仓库的仓库比较 ...

  7. matplotlib 示例

    示例1 import numpy as np import matplotlib.pyplot as plt #plt.rcParams['font.family'] = ['sans-serif'] ...

  8. @loj - 3046@「ZJOI2019」语言

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 九条可怜是一个喜欢规律的女孩子.按照规律,第二题应该是一道和数据 ...

  9. 震惊！ConcurrentHashMap里面也有死循环，作者留下的“彩蛋”了解一下？

    JDK BUG 这篇文章,聊一下我最近才知道的一个关于 JDK 8 的 BUG 吧. 首先说一下我是怎么发现这个 BUG 的呢? 大家都知道我对 Dubbo 有一定的关注,前段时间 Dubbo 2.7 ...

  10. Maven和Gradle如何添加依赖

    仓库地址:https://mvnrepository.com