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 ...
随机推荐
- sql server报【从varchar数据类型到datetime数据类型的转换产生一个超出范围的值】错误的解决办法
产生这个错误的原因是在使用convert函数将给定的日期字符串转换为日期类型的时候,因为datetime这个数据类型有时间数值的范围限定,当超出时间范围时就抛出这个错误. 如果类型是[datetime ...
- 【02】Saltstack：Grains and Pillar
写在前面的话 上一节谈及了 Saltstack 的安装和初始化配置,本节将谈谈 Saltstack 中两个重要的东西,Grains 和 Pillar. 数据系统 Grains 入门 Grains 是静 ...
- Quartz.Net 删除一个Job
Quartz.Net 删除Job 来博客园的第一篇文章先写个简单的,希望能帮助到大家. 步入正题: Quartz.Net有三个重要的概念,分别是 Scheduler .Job .Trigger. S ...
- Qt keyevent学习笔记
在按下一个键不放后,会发生: 1.触发keypressevent(),此时isautorepeat()返回false: 2.set isautorepeat(),使其返回值为true; 3.触发key ...
- BindRequired and Required
[https://www.cnblogs.com/tdfblog/p/required-and-bindrequired-in-asp-net-core-mvc.html] Required:对值进行 ...
- 数据库系列（五）之 mysql的伸缩性
这篇文章,主要讲述mysql的伸缩性.在国内mysql一直都是使用得最多的数据库,在国外也排名前三.mysql是一款开源的.性能较高的数据库. 伸缩性是指在软件设计中,软件(数据库.应用程序)通过特定 ...
- em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
- CSS泣鬼神
博主网站 一.CSS介绍和语法 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明 ...
- thinkphp路由配置route.php
路由设置配置 打开route.php 引入Route控制器类(use think\Route;) 设置路由--> Route::rule('路由表达式','路由地址','请求类型','路由参 ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...