我们有几种方式可以隐藏一个元素:
- CSS position绝对定位,使元素位于可视范围外
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- CSS display的值是none。
- CSS visibility的值是hidden
- CSS opacity的值是0
下面重点是说一下常用即面试常被问到的三种隐藏元素方式:display: none | visibility: hidden opacity: 0
基本功能:
display: none
: 元素自身及后代元素都会隐藏,隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占据的空间消失。visibility: hidden
: 隐藏元素,但是占用与未隐藏时一样的空间。opacity=0
: 只是透明度为100%,使元素隐藏,依然占据空间。
display: none | visibility: hidden | opacity=0
三者的区别:-
文档空间:
display: none
:隐藏后的元素不占据任何空间,动态改变此属性时引起重排,
visibility: hidden
:隐藏后的元素空间依旧保留,动态改变此属性时引起重绘,不会影响列表的计数;
opacity: 0
会占据空间,只会产生重绘,不会影响列表的计数 -
属性继承:
display: none
不会被子元素继承,元素设置该属性后,自身连同其子元素都会隐藏,即使在子元素上设置 display:block ,子元素也不会显示
visibility: hidden
具有继承性,给父元素设置visibility:hidden;
,子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible;
,则子元素又会显示出来。
opacity: 0
会被子元素继承,不能通过设置子元素的opacity: 1
使其显示 -
事件绑定
display: none
和visibility: hidden
元素上绑定的事件无法触发
opacity: 0
元素上绑定的事件可以触发 -
过渡动画:
transition
对display: none
和visibility: hidden
无效; 对opacity: 0
有效
区别验证:
- 文档空间 | 属性继承 | 事件绑定
<html>
<head>
<meta charset="UTF-8">
<title>display: none | visibility: hidden | opacity=0</title>
</head>
<body>
<p><strong>display:none;</strong></p>
<ol id="ul1" class="display">
<li id="1">第1个元素</li>
<li id="2" style="display:none;">
<p style="display:block;color:red;">
第2个li元素的子元素display:block
</p>
</li>
<li id="3">第3个li元素</li>
</ol>
<p><strong>visibility:hidden</strong></p>
<ol id="ul2" class="visibility">
<li id="1">第1个li元素</li>
<li id="2" style="visibility:hidden">第2个li元素
<p style="visibility: visible;color:red;">
第2个li元素的子元素visibility: visible
</p>
</li>
<li id="3">第3个li元素</li>
</ol>
<p><strong>opacity:0</strong></p>
<ol id="ul3" class="visibility">
<li id="1">第1个li元素</li>
<li id="2" style="opacity:0">第2个li元素
<p style="opacity:1;color:red;">
第2个li元素的子元素opacity:1
</p>
</li>
<li id="3">第3个li元素</li>
</ol>
<script>
var oUl1 = document.getElementById("ul1");
var oUl2 = document.getElementById("ul2");
var oUl3 = document.getElementById("ul3");
oUl1.onmouseover = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li,防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
console.log(target.id)
}
};
oUl1.onmouseout = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li,防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff";
}
};
oUl2.onmouseover = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li,防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
console.log(target.id)
}
};
oUl2.onmouseout = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li,防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff";
}
};
oUl3.onmouseover = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li,防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "red";
console.log(target.id)
}
};
oUl3.onmouseout = function (ev) {
var ev = ev || window.event; // 获取当前事件源
var target = ev.target || ev.srcElement; // 兼容IE和标准浏览器
// 判断目标标签是否为li,防止点击ul出发事件
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = "#fff";
}
};
</script>
</body>
</html>
- 过渡动画
<html>
<head>
<meta charset="UTF-8">
<title>过度属性</title>
<style>
.parent{
width: 100px;
height: 100px;
background-color: sandybrown;
opacity: 0;
transition: all 5s ease;
}
.parent:hover {
opacity: 1;
}
.child {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
parent
<div class="child">child</div>
</div>
</body>
</html>