在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. Java实现 LeetCode 594 最长和谐子序列（滑动窗口）

    594. 最长和谐子序列 和谐数组是指一个数组里元素的最大值和最小值之间的差别正好是1. 现在,给定一个整数数组,你需要在所有可能的子序列中找到最长的和谐子序列的长度. 示例 1: 输入: [1,3, ...

  2. Java实现 LeetCode 391 完美矩形

    391. 完美矩形 我们有 N 个与坐标轴对齐的矩形, 其中 N > 0, 判断它们是否能精确地覆盖一个矩形区域. 每个矩形用左下角的点和右上角的点的坐标来表示.例如, 一个单位正方形可以表示为 ...

  3. Java实现 LeetCode 8 字符串转换整数（atoi）

    8. 字符串转换整数 (atoi) 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非 ...

  4. java实现巧排扑克牌

    ** 巧排扑克牌** 小明刚上小学,学会了第一个扑克牌"魔术",到处给人表演.魔术的内容是这样的: 他手里握着一叠扑克牌:A,2,-J,Q,K 一共13张.他先自己精心设计它们的顺 ...

  5. [leetcode] 股票问题

    参考文章: [1] 团灭 LeetCode 股票买卖问题 [2] Most consistent ways of dealing with the series of stock problems 其 ...

  6. JVM中堆的介绍

    一.堆的概述 一个JVM实例只有一个堆内存,堆也是Java内存管理的核心区域,堆在JVM启动的时候创建,其空间大小也被创建,是JVM中最大的一块内存空间,所有线程共享Java堆,物理上不连续的逻辑上连 ...

  7. 02.快捷键及基本dos命令

    无论是使用Windows.Linux操作系统,还是在IDE中,快捷键都是系统本身的标配,事实上,Ctrl+C.V这样的操作,可以帮我们节省大量的时间,如果在IDE中编写代码,除了代码本身,将其余所有的 ...

  8. 「雅礼集训 2017 Day4」洗衣服

    题目   点这里看题目. 分析   首先考虑只有洗衣机的情况.我们可以想到,当前洗衣任务结束越早的洗衣机应该被先用,因此可以用堆来动态维护.   再考虑有烘干机的情况.很显然,越晚洗完的衣服应该越早烘 ...

  9. 基于session对象实现简单的购物车应用

    大部分购物网站都会实现购物车的功能,基于session对象的购物车应用可以实现一个用户会话有效期内,用户所选多个商品的存储. 为了实现这样的功能需要编写三个JSP页面,分别是login.jsp.mai ...

  10. 用字典优化过长的if 语句

    如果代码中,if 语句,后面elif 过多,完全可以用字典来优化代码. def response(method): if method == "POST": return &quo ...