display：none和visibility:hidden
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的更多相关文章
- CSS样式“display:none”与“visibility:hidden”区别
CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: <!DOCTYP ...
- display:none与visibility: hidden的区别
display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...
- 个人收集（转载）CSS中 display:none和visibility:hidden的区别
visibility和display两个属性都有隐藏元素的功能,display:none和visibility:hidden的区别,简单的总结一句话就是:visibility:hidden隐藏,但在浏 ...
- display:none;与visibility:hidden;的区别
visibility:隐藏对应的元素但不挤占该元素原来的空间.display:隐藏对应的元素并且挤占该元素原来的空间. 下面来看visibility和dispaly的一些参数 visibility用来 ...
- CSS样式display:none和visibility:hidden的区别
同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...
- display:none和visibility:hidden的区别[]
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空 ...
- css元素隐藏（display:none和visibility:hidden）
在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css display:none 当使用该样式的时候,HTML元素的宽高等 ...
- CSS魔法堂：display:none与visibility:hidden的恩怨情仇
前言 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...
- display:none vs visibility:hidden
[display:none vs visibility:hidden] 设置元素的display为none是最常用的隐藏元素的方法. 1 .hide { 2 display:none; 3 } 将元素 ...
- display:none和visibility:hidden
display:none和visibility:hidden的区别在哪儿? “这个问题简单?”我心里头暗自得意,按耐住自己得意又紧张的小心脏,自信满满地说,“这两个声明都可以让元素隐藏,不同之处在于d ...
随机推荐
- php 安装xdebug扩展和配置phpstorm断点
参考链接:安装xdebug扩展和配置phpstorm断点
- 1 Python命令行参数（脚本神器）
#!/usr/bin/env python3.7 # -*- coding:utf-8 -*- # Author: Lancer 2019-09-02 10:07:21 import sys,geto ...
- 深挖Jvm垃圾收集
垃圾收集(Garbage Collection,GC),它的任务是解决以下 3 件问题: 哪些内存需要回收? 什么时候回收? 如何回收? 其中第一个问题很好回答,在 Java 中,GC 主要发生在 J ...
- Exif认识（二）
通过php获取exif信息后,像光圈和快门的值还需要转换下,才是我们常用看得懂的值 ApertureValue的值: 拍照时镜头的光圈. 单位是 APEX. 为了转换成普通的 F-number(F-s ...
- 移动前端viewPort的那些事
1.viewport简单说 一般来说,移动上的viewport都是大于浏览器窗口的,不同的设备有自己默认的viewport值(980px或1024px). 2.三个viewport的理解(layout ...
- i春秋——“百度杯”CTF比赛 九月场——123（Apache解析pht,phtml,php3,phps等 php别名）
网页源码提示用户信息在user.php中,直接访问是不会有显示的,于是查找相应的备份文件,vim交换文件等,最后发现/user.php.bak 用burp采用如下配置开始爆破 最后爆破出两个账号 登录 ...
- `Java`中`abstract class`与`interface`区别
abstract class Java中允许使用abstract修饰符声明方法,此时只定义方法但是不实现方法(abstract修饰的方法没有主体,只有一个签名和一个分号). 以下是abstract方法 ...
- SQL 分组后只获取每组的一条数据
/****** Object: Table [dbo].[TEMP] Script Date: 2018-8-22 星期三 23:33:09 ******/ SET ANSI_NULLS ON GO ...
- C# 读取Excel文件数据
1.首先需要在管理NuGet程序包中添加外部包:ExcelDataReader,添加好后,不要忘记在命名空间那里引用. 2.定义文件流,将文件流传入IExcelDataReader类型的对象excel ...
- Linux使用svn在github上下载部分文件(单个文件夹)
1.安装svn sudo apt-get update sudo apt-get install subversion 2.输入命令 svn checkout (url) 这里url是github上要 ...