html隐藏元素hidden,CSS中隐藏元素的几种方法
几种方法的简单介绍
display:none
最常用的隐藏元素的方法
.hidden{
display:none
}
将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘
visibility:hidden
此方法也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排
.hidden{
visibility:hidden
}
visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景
opacity:0
opacity属性表示元素的透明度,而将元素的透明度设置为0后,在我们眼中,元素也就是隐藏起来的,这也算是一种隐藏元素的方法
.transparent {
opacity:0;
}
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中
设置height,width等盒模型属性为0
一种比较奇葩的技巧,简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素
.hiddenBox {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
这种方式既不实用,也存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果
元素隐藏后的事件响应
如果被隐藏的元素绑定了一些事件,我们执行了相关操作后,这些事件是否会被响应并执行呢,看看下面的代码:
div {
width: 100px;
height: 100px;
background: red;
margin: 15px;
padding: 10px;
border: 5px solid green;
display: inline-block;
overflow: hidden;
}
.none { display: none; }
.hidden { visibility: hidden; }
.opacity0 { opacity: 0; }
.height0 { height: 0; }
$(".none").on("click", function () {
console.log("none clicked");
})
$(".hidden").on("click", function () {
console.log("hidden clicked");
})
$(".opacity0").on("click", function () {
console.log("opacity0 clicked");
})
$(".height0").on("click", function () {
console.log("height0 clicked");
})
这段代码将四种隐藏元素的方法分别展示出来,然后绑定其点击事件,经过测试,主要有下面的结论:
display:none:元素彻底消失,很显然不会触发其点击事件
visibility:hidden:无法触发其点击事件,有一种说法是display:none是看不见摸不着,而visibility:hidden是看不见摸得着,这种说法是不准确的,设置元素的visibility后无法触发点击事件,说明这种方法元素也是消失了,只是依然占据着页面空间
opacity:0:可以触发点击事件,原因也很简单,设置元素透明度为0后,元素只是相对于人眼不存在而已,对浏览器来说,它还是存在的,所以可以触发点击事件
height:0:将元素的高度设置为0,并且设置overflow:hidden。使用这种方法来隐藏元素,是否可以触发事件要根据具体的情况来分析。如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件
但是这些结论真的准确吗?
我们在上面的代码中添加这样一句代码:$(".none").click()
结果发现,触发了click事件,也就是通过JS可以触发被设置为display:none的元素的事件。
所以前面无法触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的元素
CSS3 transition对这几种方法的影响
CSS3提供的transition极大地提高了网页动画的编写,但并不是每一种CSS属性都可以通过transition来进行动画的。我们修改代码如下:
div {
width: 100px;
height: 100px;
background: red;
margin: 15px;
padding: 10px;
border: 5px solid green;
display: inline-block;
overflow: hidden;
transition: all linear 2s;
}
$(".none").on("click", function () {
console.log("none clicked");
$(this).css("display", "none");
})
$(".hidden").on("click", function () {
console.log("hidden clicked");
$(this).css("visibility", "hidden");
})
$(".opacity0").on("click", function () {
console.log("opacity0 clicked");
$(this).css("opacity", 0);
})
$(".height0").on("click", function () {
console.log("height0 clicked");
$(this).css({
"height": 0,
});
})
经过测试,可以看到:
display:none:完全不受transition属性的影响,元素立即消失
visibility:hidden:元素消失的时间跟transition属性设置的时间一样,但是没有动画效果
opacity和height等属性能够进行正常的动画效果
假设我们要通过CSS3来做一个淡出的动画效果,应该如下:
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
.fadeOut:hover { visibility: hidden; opacity: 0; }
应该同时设置元素的visibility和opacity属性
总结说明
本文总结说明了“隐藏”元素的几种方式,其中最常用的还是display:none和visibility:hidden。其他的方式只作了解即可,并不推荐使用它们来隐藏元素,它们的真正用途应该不在隐藏元素,而是通过了解这些方法的特点,挖掘出其真正的使用场景
html隐藏元素hidden,CSS中隐藏元素的几种方法相关推荐
- 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
- 在 CSS 中隐藏元素的 10 种方法
在CSS中很多隐藏元素的方法,但这些方法的可访问性.布局.动画.性能和事件处理的方式有所不同. 动画: 一些CSS隐藏元素的方法一般是全有或者全无,元素要么是完全可见,要么是完全不可见,并且没有中间状 ...
- display none 隐藏后怎么显示_Web 隐藏技术:几中隐藏 Web 中的元素方法及优缺点
在 Web 开发中出于多种原因,我们需要隐藏元素.例如,一个按钮应该在移动中可见,而在桌面视口中隐藏.或者,在移动设备上隐藏但要在桌面上显示的导航元素.隐藏元素时有三种不同的状态: 元素完全隐藏并从文 ...
- CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
- html中选择字体的元素,深入探讨CSS中字体元素
深入探讨CSS中字体元素 更新时间:2006年09月25日 00:00:00 作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...
- 怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍 在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
- 文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
- css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法 发布时间:2020-06-25 10:53:17 来源:亿速云 阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
- 苹果手机怎么隐藏照片?给iPhone相册上锁的3种方法
iPhone手机中保存了大量隐私照片,担心被他人看见?如何将苹果手机照片加密隐藏? 今天小编将教你三种方法给苹果手机相册加密,为你的隐私保驾护航! 一.隐藏相册 苹果手机是自带相册隐藏功能的,只需将自 ...
最新文章
- Python 标准库之 commands
- ITSM实施三招[案例]
- 错误(活动)E0020未定义标识符 “_TCHAR“
- twisted:基于python的twisted框架编写一个客户端和服务端的对话聊天空间
- AI理论知识整理(3)-正定矩阵
- [转]Android产品研发(十九)
- oracle中xml如何存储过程,oracle存储过程生成xml文件
- python docker自动化_「docker实战篇」python的docker爬虫技术-移动自动化控制工具安卓ADB的使用(15)...
- MFC工作笔记0003---WindowsAPI与MFC的关系
- linux 串口 dma,STM32 USART串口DMA 接收和发送流程详解
- ctab法提取dna流程图_每周实验新品:创新核酸提取技术、离心管自动打标设备...
- CSS实现单行、多行文本溢出显示省略号(…)
- levelup游戏资料库项目开发备忘录(10.26)
- 【java】生成一个均匀分布的参考平面
- 基于大数据分析山东2020年高考难度和选科要求(一)
- 输出1000以内能被7整除又能被5整除的数
- 引导滤波guideFilter原理推导与实验
- java源码 - SpringMVC(9)之 其他Resolver
- wps2019去弹窗广告和屏保
- 随身WiFi制作Linux服务器