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. Android模拟器太慢怎么办？使用微软的VS模拟器

    开发过android的人都知道,android模拟器非常的慢,推荐使用微软的VS模拟器. (1)到 https://visualstudio.microsoft.com/zh-hans/vs/msft ...

  2. eclipse使用maven，启动工程tomcat报错：java.lang.ClassNotFoundException: org.springframework.web.context.Contex

    maven是个不错的管理jar包工具,但是我们在eclipse使用maven时,总是遇上这样那样的问题,比如今天,我编译工程,启动过后,tomcat报错:java.lang.ClassNotFound ...

  3. js汉字转换为阿拉伯数字支持十到十九

    js汉字转换为阿拉伯数字  直接贴函数 function cnnumtonum(chnStr){ var chnNumChar = { 零:,一:,二:,三:,四:,五:,六:,七:,八:,九: }; ...

  4. .NET MVC 序列化与反序列化

    using System.Runtime.Serialization.Json; using System.IO; using System.Text; //序列化        public str ...

  5. dotnet core 之 gRPC

    dotnet core gRPC 原文在本人公众号中,欢迎关注我,时不时的会分享一些心得 HTTP和RPC是现代微服务架构中很常用的数据传输方式,两者有很多相似之处,但是又有很大的不同.HTTP是一种 ...

  6. 01 .NET CORE 2.2 使用OCELOT -- 简单使用

    目前参考两篇文章,已实现基本的ocelot的网关功能. https://www.cnblogs.com/xlxr45/p/11320988.html https://www.jianshu.com/p ...

  7. Javascript 日历插件

    1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点击下载    查看示例 2. DatePicker 这款日期插件支持单选.多选和 ...

  8. 将Redis设置为后台启动

    Linux 在执行redis-server  /etc/redis.conf 时默认开启的是一个前台的进程,也就是说启动的redis 就做不了其他的操作了,只有关闭redis 才能做其他的操作.非常的 ...

  9. gulp教程、gulp-less安装

    gulp教程之gulp-less gulp详细入门教程 11.1.安装nodejs: 11.2.新建package.json文件:cnpm init 11.3.全局和本地安装gulp: cnpm in ...

  10. AIX系统逻辑卷管理

    前言: 前期项目需要部署多套AIX环境下RAC集群,之前很少接触AIX系统,上来被创建逻辑卷等基本命令打脸了,其实网上搜下资料很多,总结一下,也是方便自己日后查阅. 创建逻辑卷 1.查看所有磁盘设备 ...