您现在的位置是:首页 >
当前栏目
display: none、visibility: hidden和opacity: 0的区别
区别 display hidden none opacity visibility
2023-06-13 09:11:14 时间
是否脱离文档流
- display: none:元素将脱离文档流,不占据原来的空间,会引起页面的重排
- visibility: hidden:不会脱离文档流,元素不可见仍然占据原来的位置
- opacity: 0:不会脱离文档流,元素不可见仍然占据原来的位置
是否继承可见性
display: none 和 opacity: 0,子元素会和父元素一样保持不可见。
visibility: hidden 的父元素下,若子元素设为 visibility: visible,则父元素不可见,子元素可见。示例如下:
<style type="text/css">
.parent {
visibility: hidden;
width: 300px;
height: 300px;
background-color: #2468F2;
}
.child {
visibility: visible;
width: 200px;
height: 100px;
background-color: #CCC;
}
</style>
<div class="parent">
<div class="child">child</div>
<div>
结果如下:
是否响应事件
- display: none元素都不在文档流中了,不会响应事件
- visibility: hidden 的元素也不会响应事件
- opacity: 0 的元素可以响应事件
示例如下:
<style type="text/css">
.box {
display: inline-block;
font-size: 48px;
width: 300px;
height: 300px;
}
.box:active {
cursor: wait;
}
#opacity {
background-color: #F00;
}
#visibility {
background-color: #00F;
}
</style>
<div id="opacity" class="box">opacity</div>
<div id="visibility" class="box">visibility</div>
<button onclick="setHidden()">设置不可见</button>
<script type="text/javascript">
const opacityEl = document.getElementById('opacity');
const visibilityEl = document.getElementById('visibility');
function setHidden() {
opacityEl.style.opacity = 0;
visibilityEl.style.visibility = 'hidden';
}
opacityEl.onclick = function () {
alert('click');
}
visibilityEl.onclick = function () {
alert('click');
}
</script>
结果如下:
相关文章
- java全局变量和局部变量的区别「建议收藏」
- 面试题-页面导入样式时,使用link和@import有什么区别,请详述讲解
- 测试用例等价类和边界值_等价类划分和边界值的区别与联系
- 【Linux Shell】你知道bash shell和dash shell的区别吗?
- 前端入门教程:CSS标准盒模型和怪异盒模型区别
- 7分钟掌握 ByteBuf 和 ByteBuffer 工作原理及区别
- 网络工程师必知:虚拟主机和云服务器有什么区别?
- 【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )
- Servlet 中 forward 和 redirect 的区别详解编程语言
- MyBatis中井号与美元符号的区别详解编程语言
- SQL与Oracle在数据库中的区别(sql和oracle区别)
- Mac和Linux系统的异同比较(mac和linux区别)
- Oracle与数据库深入探讨它们的不同之处(oracle与数据库区别)
- 比较Oracle 版本之间功能优劣对比一次游历大版本区别(oracle不同版本功能)
- jdk与jre的区别很形象,很清晰,通俗易懂
- JAVASCRIPTstyle中visibility和display之间的区别
- ThinkPHP中实例Model方法的区别说明
- INSERTINTOSELECT语句与SELECTINTOFROM语句的一些区别
- c++指针与引用的区别介绍及使用说明
- a标签的href和onclick的事件的区别介绍
- 浅析iterator与指针的区别