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. Base64和本地以及在线图片互转

    package com.ruoyi.common.utils; import java.io.ByteArrayOutputStream; import java.io.FileInputStream ...

  2. Java 8创建Stream流的5种方法

    不知不觉间,Java已经发展到13了,来不及感慨时间过得真的太快了,来不及学习日新月异的技术更新,目前大多数公司还是使用的JDK8版本,一方面是版本的稳定,另一方面是熟悉,所以很多公司都觉得不升级也挺 ...

  3. Mysql系列（九）—— 性能分析explain执行计划

    explain是mysql中sql优化的一个重要手段.顾名思义,explain就是解释sql,用于表示sql是怎样执行的信息,即sql执行计划! 语法 explain statement statem ...

  4. typora安装自定义主题小计

    我写MarkDown一直使用VSCode,后来因为有导出PDF的需求,就用了typora(含书签) PS:VSCode的导出PDF虽然也可以,但不含书签 typora的默认主题是github,虽然还可 ...

  5. ASP.NET MVC 过滤、异常过滤器

    记录下过滤器的学习—_— APS.NET MVC中的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前后如果想再加一些额外的逻辑处理,这样会造成大量代码的重复使用,这不是我们希 ...

  6. mvc 添加过滤器并添加session缓存判断

    功能实现: 登录时添加session缓存.判断是否登录过期. 1.判断是否需要登录判断 public static AdminLoginUser GetAdminLoginUser(){#region ...

  7. Java 多线程编程——多线程

    如果要想在Java之中实现多线程的定义,那么就需要有一个专门的线程主体类进行线程的执行任务的定义,而这个主体类的定义是有要求的,必须实现特定的接口或者继承特定的父类才可以完成. 1. 继承Thread ...

  8. 记录vue项目 用hbuilder离线打包集成极光推送 安卓篇

    极光推送的官方demo: https://github.com/jpush/jpush-hbuilder-demo 里面也记录有详细的方法了. 我记录下自己的过程. 首先去极光那里创建一个应用 获取A ...

  9. vue-router 在新窗口打开页面的功能

    项目中,需要点击链接后再新窗口打开页面,大家知道vue是单页面应用开发框架,那么也不是不可以实现这个功能 很简单,详情看下面 1.<router-link>标签实现新窗口打开 <ro ...

  10. set实现交集，并集，差集

    let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // ...