JS中style.display和style.visibility的区别实例说明

在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来隐藏，但是其隐藏后仍然占据原来的空间。

test

.titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer }
.contentdiv{border:3px solid #505050;height:100px;padding:10px; }

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";
}

click here(内容部分会隐藏，下面的内容会上来)

this is some content to show and hide

click here

this is some content to show and hide

click here(内容部分会隐藏，下面的内容不会上来)

this is some content to show and hide

click here

this is some content to show and hide

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 在Ruby中查找和执行方法

    当调用一个方法时,Ruby会做两件事. 1.找到这个方法.这个方法称为方法查找. 2.执行这个方法.为了做到这点,Ruby需要一个叫做self的东西. 这样的一个过程--发现一个方法再执行之--在每种面向对象语言中都会发生.不过,对于像Ruby这样非常动态的语言,深入理解这个过程显得尤为重要.你有没有好奇过一个方法究竟定义在哪里呢?如果有,那绝对应该深入理解方法查找及self. 当调用一个方法时,Ruby会在对象的类中查找那个方法.不过,在给出更复杂的例子之前,你需要了解两个新概念:接收者(re

  • js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

  • js style.display=block显示布局错乱问题的解决方法

    1.当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析. 2.同一行反复的在"display:none;"与"display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲. 解决方法: 1.用display:table-row属性来调试,发现者FireFox下正常了,但IE是不支持改属性的,

  • js中Map和Set的用法及区别实例详解

    js中Map和Set的用法及区别实例详解

    目录 首先了解一下 Map 再来了解一下 Set 总结Map和Set的区别 结语: 首先了解一下 Map Map 是一组键值对的结构,和 JSON 对象类似. (1) Map数据结构如下 这里我们可以看到的是Map的数据结构是一个键值对的结构 (2) key 不仅可以是字符串还可以是对象 var obj ={name:"小如",age:9} let map = new Map() map.set(obj,"111") 打印结果如下 (3) Map常用语法如下 //初

  • JS中style.display和style.visibility的区别实例说明

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

  • JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此 (2)表单提交时,所有具有name属性的html输入元素(包括input标签.button标签.select标签等)都将作为键值对提交,除了Submit对象.Submit对象只有在自己被单击后的提交中才会作为键值对被提交. 但是

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

  • js中let和var定义变量的区别

    javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup

  • JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

    排序算法的介绍 排序也称排序算法 (Sort Algorithm),排序是将 一组数据 , 依指定的顺序 进行 排列的过程 . 排序的分类 1)  内部排序 : 指将需要处理的所有数据都加载 到 内部存储器(内存) 中进行排序. 2) 外部排序法: 数据量过大,无法全部加载到内 存中,需要借助 外部存储(文件等) 进行 排序. 常见的排序算法分类 算法的时间复杂度 度量一个程序(算法)执行时间的两种方法 1.事后统计的方法 这种方法可行, 但是有两个问题:一是要想对设计的算法的运行性能进行评测,

  • JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此 (2)表单提交时,所有具有name属性的html输入元素(包括input标签.button标签.select标签等)都将作为键值对提交,除了Submit对象.Submit对象只有在自己被单击后的提交中才会作为键值对被提交. 但是

  • JS中ESModule和commonjs介绍及使用区别

    目录 ES Module 导出 仅导出 重导出(re-exporting / aggregating) 嵌入式脚本 引入 语法 嵌入式脚本 特点 commonJS 导出 引入 特点 值拷贝 ES Module和 commonJS区别 ES Module 导出 仅导出 named exports: 命名导出,每次可以导出一个或者多个. default exports: 默认导出,每次只能存在一个. 以上两者可以混合导出: // 命名导出 export const b = 'b' // 默认导出 e

  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    目录 1.框架 2.简单介绍 3.代码演示 4.演示break 1.框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> </script> </body> </html> 2.简单介绍 1.在javascr

  • jQuery中的on与bind绑定事件区别实例详解

    on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数. fn:该事件被触发时执行的函数. false 值也可以做一个函数的简写,返回false. bind(type,[data],fn) 为每

随机推荐