在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 657 机器人能否返回原点（暴力大法）

    657. 机器人能否返回原点 在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串表示.字符 move[i ...

  2. Java实现蓝桥杯打印图形

    标题:打印图形 如下的程序会在控制台绘制分形图(就是整体与局部自相似的图形). 当n=1,2,3的时候,输出如下: 请仔细分析程序,并填写划线部分缺少的代码. n=1时: o ooo o n=2时: ...

  3. Java实现 蓝桥杯VIP 算法提高 Quadratic Equation

    算法提高 Quadratic Equation 时间限制:1.0s 内存限制:512.0MB 问题描述 求解方程ax2+bx+c=0的根.要求a, b, c由用户输入,并且可以为任意实数. 输入格式: ...

  4. Java实现 蓝桥杯 历届试题 翻硬币

    问题描述 小明正在玩一个"翻硬币"的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:**oo***oooo 如 ...

  5. java实现第五届蓝桥杯格子放鸡蛋

    格子放鸡蛋 X星球的母鸡很聪明.它们把蛋直接下在一个 N * N 的格子中,每个格子只能容纳一枚鸡蛋.它们有个习惯,要求:每行,每列,以及每个斜线上都不能有超过2个鸡蛋.如果要满足这些要求,母鸡最多能 ...

  6. java实现第六届蓝桥杯机器人数目

    机器人数目 少年宫新近邮购了小机器人配件,共有3类,其中, A类含有:8个轮子,1个传感器 B类含有: 6个轮子,3个传感器 C类含有:4个轮子,4个传感器 他们一共订购了100套机器人,收到了轮子6 ...

  7. Mac 制作 Linux 启动盘

    本文原始地址:https://sitoi.cn/posts/28583.html 前期准备 一个 Mac 电脑 一个 U 盘(8GB 以上) 下载好 Linux 系统镜像(iso 文件) 具体步骤 挂 ...

  8. （数据科学学习手札86）全平台支持的pandas运算加速神器

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 随着其功能的不断优化与扩充,pandas已然成为 ...

  9. [leetcode] 股票问题

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

  10. python自学Day06（自学书籍python编程从入门到实践）

    第7章 用户输入和while循环 我们设计的程序大多是为了解决用户最终的问题,所以我们大多需要在用户那里获取一些信息. 学习用户输入的获取与处理,学习while循环让程序不断运行直到达到指定的条件不满 ...