w3school学习网：https://www.w3school.com.cn/tiy/t.asp?f=hdom_style_display_none

display: none----将元素的显示设为无，即在网页中不占任何的位置。

visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

两者区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。

<html>

<head>

<script type="text/javascript">

function removeElement()

{

document.getElementById("p1").style.display="none";

}

</script>

</head>

<body>

<h1>This is a header</h1>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()" value="Do not display paragraph" />

</body>

</html>

display="none"

点击按钮：

visibility:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变。例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置。

<html>

<head>

<script type="text/javascript">

function removeElement()

{

document.getElementById("p1").style.visibility="hidden";

}

</script>

</head>

<body>

<h1>This is a header</h1>

<p id="p1">This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.</p>

<input type="button" onclick="removeElement()" value="Do not display paragraph" />

</body>

</html>

visibility:hidden

运行截图：

display：none和visibility:hidden的更多相关文章

  1. CSS样式“display:none”与“visibility:hidden”区别

    CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...

  2. display:none与visibility: hidden的区别

    display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...

  3. 个人收集（转载）CSS中 display:none和visibility:hidden的区别

    visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...

  4. display:none;与visibility:hidden;的区别

    visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...

  5. CSS样式display:none和visibility:hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  6. display:none和visibility:hidden的区别[]

    display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...

  7. css元素隐藏（display:none和visibility:hidden）

    在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等 ...

  8. CSS魔法堂：display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  9. display:none vs visibility:hidden

    [display:none vs visibility:hidden] 设置元素的display为none是最常用的隐藏元素的方法. 1 .hide { 2 display:none; 3 } 将元素 ...

  10. display:none和visibility:hidden

    display:none和visibility:hidden的区别在哪儿? “这个问题简单?”我心里头暗自得意,按耐住自己得意又紧张的小心脏,自信满满地说,“这两个声明都可以让元素隐藏,不同之处在于d ...

随机推荐

  1. 【转帖】分布式事务之解决方案（XA和2PC）

    分布式事务之解决方案(XA和2PC) https://zhuanlan.zhihu.com/p/93459200 ​ 博彦信息技术有限公司 java工程师 3. 分布式事务解决方案之2PC(两阶段提交 ...

  2. 【CTS2019】随机立方体（容斥）

    [CTS2019]随机立方体(容斥) 题面 LOJ 洛谷 题解 做这道题目的时候不难想到容斥的方面. 那么我们考虑怎么计算至少有\(k\)个极大值的方案数. 我们首先可以把\(k\)个极大值的位置给确 ...

  3. 微信小程序练习笔记（更新中。。。）

    微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作  test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部 ...

  4. secure-file-priv特性

    转载自:https://segmentfault.com/a/1190000009333563 当出现:1290 - The MySQL server is running with the --se ...

  5. Logstash跟es加密通信

    前提条件,es集群内部各节点已开启https访问,集群也已开启x-pack安全功能,并设置了系统默认的用户密码等,具体操作详见:https://www.cnblogs.com/sanduzxcvbnm ...

  6. SpringCloud 别人的主页

    https://www.cnblogs.com/xuwujing/ java(28) springBoot(14) 设计模式(14) springcloud(7) hadoop(7) hive(5) ...

  7. Markdown温故知新(2)：详解七大标准语法

    1.标题 2.强调(粗体 & 斜体) 3.列表 4.链接 & 图片 5.代码块 6.引用 7.分割线 8.总结 说明:在 Markdown 中,一行是指由换行符或回车符之外的字符构成的 ...

  8. Sql语句groupBY分组后取最新一条记录的SQL

    一.问题 groupBY分组后取最新一条记录的SQL的解决方案. 二.解决方案 select Message,EventTime from PT_ChildSysAlarms as a where E ...

  9. springmvc4 mybatis 整合 框架源码 bootstrap html5 mysql oracle sqlsever spring SSM

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

  10. 数据库系列（五）之 mysql的伸缩性

    这篇文章,主要讲述mysql的伸缩性.在国内mysql一直都是使用得最多的数据库,在国外也排名前三.mysql是一款开源的.性能较高的数据库. 伸缩性是指在软件设计中,软件(数据库.应用程序)通过特定 ...