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. java中的对象、类、包、模块、组件、容器、框架、架构的概念入门

    在Java中有那么一些概念:对象.类.包.模块.组件.容器.框架.这些概念都有一个共同的特点,就是[容纳]. 对象(Object) 在Java的世界里,对象是通过属性和方法来分别对应事务所具有的静态属 ...

  2. MySQL 中获取用户表、用户视图、用户表中列信息

    直接贴代码了: /// <summary> /// MySql 数据库维护中心 /// </summary> public class MySqlDbMaintenance:D ...

  3. WPF ResourceDictionary XAML资源 c#代码 获取与遍历

    使用C#代码来获取XAML资源,除去正常的FindResource.而且是能查询到资源的对象. 说实话还是很麻烦的. 比如说我现在有一堆静态资源放在xaml的资源中,我想通过绑定的方式来获取. 好比是 ...

  4. pxelinux.0：winboot：网络引导（启动）wim格式的windows PE系统：配置文件写法

    关键:加载wimboot引导模块,并传入参数 todo:通过标准kenerl的append传入启动参数..........todo.todo default menu.c32 label wimboo ...

  5. 阿里云 OSS 如何设置防盗链, 上个月图床流量耗费50G+，请求次数10W+,什么鬼？

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  6. 2019-11-29-VisualStudio-断点调试详解

    原文:2019-11-29-VisualStudio-断点调试详解 title author date CreateTime categories VisualStudio 断点调试详解 lindex ...

  7. nginx 配置 server

    server{ listen 80; server_name test.eoews.cn; #项目文件的路径 root "D:/developer/study/PHPTutorial/WWW ...

  8. instr函数的用法

    1.定义 instr函数返回要截取的字符串在源字符串中的位置 语法如下:  instr( string1, string2 [, start_position [, nth_appearance ] ...

  9. 一、NodeJS入门——准备工作(1)——NodeJS的安装

    目录 1.介绍 2.nodejs下载 3.nodejs安装 4.nodejs的简单实用 5.nodejs的经典入门:hello world 6.总结 1    介绍 这是一系列的内容主要是关于我在学习 ...

  10. v-bind 属性绑定

    1.v-bind:title="title" 绑定谁和谁绑定. 2.v-bind:title="title" 简写::title="title&quo ...