在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/    (你想要这里多有) 关于MySQL程序中数据库调度的流程图解: ​ 1-MySql数据库的安装 ​ 安装前要注意,看看当前系 ...

  2. Shell 脚本（五） Shell 工具 及 企业面试题

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 十.Shell工具(重点) 1.cut cut 的工作就是“剪”,具体的说就是在文件中负责剪切数据用的. ...

  3. JavaScript (一) js的介绍及基本语法变量

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.JS 的 介绍 1.JavaScript :简称 : js js 分为三个部分: 1. ECMASc ...

  4. Java实现 LeetCode 365 水壶问题

    365. 水壶问题 有两个容量分别为 x升 和 y升 的水壶以及无限多的水.请判断能否通过使用这两个水壶,从而可以得到恰好 z升 的水? 如果可以,最后请用以上水壶中的一或两个来盛放取得的 z升 水. ...

  5. Java实现 LeetCode 204 计数质数

    204. 计数质数 统计所有小于非负整数 n 的质数的数量. 示例: 输入: 10 输出: 4 解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 . class Solutio ...

  6. Java实现 蓝桥杯VIP 算法提高 连接乘积

    算法提高 连接乘积 时间限制:1.0s 内存限制:256.0MB 问题描述 192这个数很厉害,用它分别乘以1.2.3,会得到: 192 x 1 = 192 192 x 2 = 384 192 x 3 ...

  7. Java实现 LeetCode 113 路径总和 II

    113. 路径总和 II 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标和 sum = ...

  8. Java实现蓝桥杯有歧义的号码

    描述 小Hi参加了一场大型马拉松运动会,他突然发现面前有一位参赛者背后的号码竟然和自己一样,也是666.仔细一看,原来那位参赛者把自己号码帖反(旋转180度)了,结果号码999看上去变成了号码666. ...

  9. Java实现第九届蓝桥杯第几天

    第几天 题目描述 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容. import java.util.Cal ...

  10. vue-cli3.0配置详解

    这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...