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 ...
随机推荐
- centos6.5 安装openresty
[1]centos6.5 安装openresty步骤 (1)基础依赖库安装 1.1 yum install pcre-devel openssl-devel gcc curl (2)openResty ...
- IntelliJ idea 撤回(已经commit未push的)操作
VSC => Git => reset head => 退回到上次commit => 退回到第2次提交之前 => 退回到指定commit版本
- R与金钱游戏：均线黄金交叉2
从上一篇分析已经得知均线黄金交叉原则并不适用于震荡期,那有什么办法可以规避震荡期呢或者说有什么办法可以减少无脑跟的损失?我们继续玩一下. Required Packages library(quant ...
- Git更改文件名大小写，提交失败问题解决
背景:某java文件大小写写错了,一直提交不上去 例如我只是将updatePrivacySettingsTest.java变更为UpdatePrivacySettingsTest.java,但是add ...
- 关于Ext checkboxfiled 获取值为 on的解决办法
今天在做Ext checkboxfield 为取值为on,应该是true或false,解决办法是把Name去掉,只设置ID即可 { xtype: "container", layo ...
- 一次U9身份验证http数据对接
一般情况下传输和回传HTTP协议就搞定了,但这次不同,有身份验证,网上的资料相对较少,怎么办呢?.NET没有不代表JAVA没有,网上搜JAVA身份验证HTTP协议, 果然是有的,跟着代码改成相应的.N ...
- 使用CodeFirst创建数据库
1.新建一个类库项目 2.右键管理Nuget程序包,搜索EntityFramework.然后安装 3.新建一个类,然后引用 using System.Data.Entity; 然后写类初始化方法(ba ...
- Python渗透测试工具库
漏洞及渗透练习平台 WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.com ...
- Jenkins 任务定时
在项目配置中选择 Build Triggers 下勾选 Build periodically,可以对项目进行定时构建设置.构建设置详细可通过右边的问号符号进行查看. 定时构建字段遵循 cron 的语法 ...
- TinyMCE入门
引入TinyMCE脚本 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" ...