在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. Linux （一）概述

    认识操作系统 操作系统的作用 把计算机系统中对硬件设备的操作封装起来,供应用软件调用. ​ 2. 常见操作系统        1.2.1 PC端OS ​ 1.2.2  移动端OS ​ 1.2.3  服 ...

  2. JavaScript (二) js的基本语法 - - 运算符、流程控制

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.运算符 1.一元运算符 ++ -- 都是运算符 ++ 和 -- 可以分为:前+ 和后+ and 前- ...

  3. Java实现 蓝桥杯 基础练习 杨辉三角形

    基础练习 杨辉三角形 时间限制:1.0s 内存限制:256.0MB 提交此题 锦囊1 锦囊2 问题描述 杨辉三角形又称Pascal三角形,它的第i+1行是(a+b)i的展开式的系数. 它的一个重要性质 ...

  4. Java实现蓝桥杯 算法训练 Professor Monotonic's Network

    试题 算法训练 Professor Monotonic's Network 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 无聊的教授最近在做一项关于比较网络的实验.一个比较网络由若 ...

  5. Java实现 蓝桥杯VIP 算法提高 乘法运算

    算法提高 乘法运算 时间限制:1.0s 内存限制:512.0MB 问题描述 编制一个乘法运算的程序. 从键盘读入2个100以内的正整数,进行乘法运算并以竖式输出. 输入格式 输入只有一行,是两个用空格 ...

  6. Java实现蓝桥杯历届试题区间移位

    问题描述 数轴上有n个闭区间D1,-,Dn.其中区间Di用一对整数[ai, bi]来描述,满足ai < bi.已知这些区间的长度之和至少有10000.所以,通过适当的移动这些区间,你总可以使得他 ...

  7. jstat监控JVM内存使用、GC回收情况

    jstat -gcutil 2388 3000 6 每隔3秒打印一次pid为2388的堆内存的使用情况,共打印6次 S0— Heap上的 Survivor space 0 区已使用空间的百分比 S1  ...

  8. Markdown编辑器说明

    标题: Markdown编辑器说明 作者: 梦幻之心星 347369787@QQ.com 标签: [Markdown, 编辑器] 目录: [软件] 日期: 2020-6-4 前提说明 在使用Markd ...

  9. 彻底解决go get golang.org/x等包失败与VSCode golang插件安装失败问题

    由于某种众所周知的一些原因,https://golang.org/ golang 的官方域名是被墙了的,这也就导致了, 在广大 go 开发者使用 golang 的时候,总会出现 go get 失败的问 ...

  10. 通过SecureCRT向远程Linux主机上传和下载文件

    有时候直接在Linux服务器上通过 wget 或 curl 工具下截比较大的网络文件时会比较慢,这时我们通常会改用在Windows平台通过迅雷等更加现代化的下载功具下好目标文件(迅雷开会员才能更高速的 ...