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 ...
随机推荐
- 『You Are Given a Tree 整体分治 树形dp』
You Are Given a Tree Description A tree is an undirected graph with exactly one simple path between ...
- Python 学习：常用函数整理
整理Python中常用的函数 一,把字符串形式的list转换为list 使用ast模块中的literal_eval函数来实现,把字符串形式的list转换为Python的基础类型list from as ...
- Redis（九）高可用专栏之Sentinel模式
本文讲述Redis高可用方案中的哨兵模式--Sentinel,RedisClient中的Jedis如何使用以及使用原理. Redis主从复制 Redis Sentinel模式 Jedis中的Senti ...
- Java内功心法，创建型设计模式包括哪些
1. 单例(Singleton) Intent 确保一个类只有一个实例,并提供该实例的全局访问点. Class Diagram 使用一个私有构造函数.一个私有静态变量以及一个公有静态函数来实现. 私有 ...
- 【python+selenium学习】Python常见错误之：IndentationError: unexpected indent
初入python+selenium学习之路,总会遇到这样那样的问题.IndentationError: unexpected indent,这个坑我已经踏进数次了,索性记录下来.都知道Python对代 ...
- android studio学习---实时布局（Live Layout）
Android Studio中的实时布局功能允许大家在无需将应用程序运行在设备或者模拟器中的前提下,直接预览应用的用户界面.实时布局是一款极为强大的工具,能够帮助开发者节约大量时间.在实时布局的帮助下 ...
- 使用Jenkins+Docker+Gitlab+Maven搭建持续集成环境
继使用Docker搭建Gitlab后 大致的步骤如下: 开发人员通过IDE工具(IntelliJ IDEA)将代码推送到gitlab. jenkins从gitlab中获取到源码,并使用maven编译. ...
- OSI、TCP/IP
计算机网络分层的目的:支持异构网络系统的互联互通 7层OSI参考模型是法定标准(国际标准化组织ISO提出) 4层TCP/IP参考模型是事实标准 OSI参考模型 应用层.表示层.会话层.传输层.网络层. ...
- cephfs测试中出现的问题
最近重新对cephfs进行性能测试. 测试步骤: (1) 选取一个特地版本的操作系统内核,挂载20000个客户端; (2) 用iozone中的fileop工具,在每隔挂载点上都跑一个fileop进程; ...
- Linux服务管理之SSH
Linux服务SSH ssh服务: 管理服务器的方式: 本地管理类 (安装系统,故障修复) SHH远程连接方式 ...