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 ...
随机推荐
- 发送邮件报错javax.activation.UnsupportedDataTypeException: no object DCH for MIME type multipart/mixed
关于使用javaMail发送邮件报错:javax.activation.UnsupportedDataTypeException: no object DCH for MIME type multip ...
- 【CTS2019】随机立方体（容斥）
[CTS2019]随机立方体(容斥) 题面 LOJ 洛谷 题解 做这道题目的时候不难想到容斥的方面. 那么我们考虑怎么计算至少有\(k\)个极大值的方案数. 我们首先可以把\(k\)个极大值的位置给确 ...
- 在Windows10 安装 Linux 子系统
在工作中我们经常需要在Windows中安装Linux系统来完成一些工作,通常使用VMware.virtualpc,Hyper-V等虚拟化技术来实现,Now,我们有了更便利的方法来实现,这就是Windo ...
- 使用Ueditor上传图片到图片服务器（一）
网站的文章,通过运营平台来发布文章(图文消息),上传图片等.百度Ueditor比较成熟就采用了该技术,另外上传的图片是网站系统以及运营平台系统共享的,所以考虑搭建独立的图片服务器,以后也可以提供给公司 ...
- Ubuntu Nginx https 配置
#配置http跳转到https 80跳转443server { listen ; server_name www.***.com www.***.cn; https://$server_name$re ...
- 记第一次使用NET CORE 2.2 完成的DEMO部署在LINUX并且上线
.NET CORE 这么久了一直没有成功打通过,今天花了点儿时间做了一个小DEMO,首次完成并且部署上线.记录一下. DEMO中只是测试了一下从MSSQL中获取数据,并且显示在页面上,涉及到了数据库连 ...
- loadrunner11 您不具有该 Vuser 类型的许可证. 请与 HP Software 联系以更新许可证.
您不具有该 Vuser 类型的许可证. 请与 HP Software 联系以更新许可证. 在loadrunner11 执行发生报错: 打开loadrunner软件首页,点击配置-->loadru ...
- 微服务架构 ------ 插曲 Mybatis逆向工程
1.首先是pom.xml, 我们需要引入需要的mvn插件 <?xml version="1.0" encoding="UTF-8"?> <pr ...
- 浅谈Vue.js2.0核心思想
Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动.组件系统. 数据驱动: Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProper ...
- 实验吧——你真的会PHP吗？（intval范围 php中\00的利用）
题目地址:http://ctf5.shiyanbar.com/web/PHP/index.php 抓包在header中发现提示 访问得到源码 <?php $info = "" ...