这篇文章将为大家详细讲解有关css3如何控制元素隐藏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
控制方式：1、使用“display:none”语句将元素移除出可访问性树，进而实现元素隐藏；2、使用“visibility: hidden”语句设置元素不可见；3、使用“opacity: 0”语句设置元素透明；4、让元素脱离屏幕显示位置等。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3控制元素隐藏的方式
第一种：移除出可访问性树
display : none
display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>display : none</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
display : none;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第二种：隐藏元素
visibility: hidden
将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>visibility: hidden</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
visibility: hidden;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第三种：透明
opacity: 0
opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>opacity: 0</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
opacity: 0;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>transparent
将元素的background-color、color和border-color设置为transparent(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transparent</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: transparent;
background-color: transparent;
border-color: transparent;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>rgba(0,0,0,0)
从技术上说，transparent是 rgba(0,0,0,0) 的简写，将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>rgba(0,0,0,0)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>rgba只需要第四个参数为0即可达到隐藏元素的效果。
hsla(0,0%,0%,0)
hsla使用元素隐藏的机制与rgba一致，都是由第四个参数Alpha所控制的，将元素的background-color、color和border-color设置为hsla(0,0%,0%,0)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>hsla(0,0%,0%,0)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: hsla(0,0%,0%,0);
background-color: hsla(0,0%,0%,0);
border-color: hsla(0,0%,0%,0);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>hsla和rgba一致，只需要第四个参数为0即可达到隐藏元素的效果。
filter: opacity(0%)
filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>filter: opacity(0%)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
filter: opacity(0%);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第四种：缩放
transform: scale(0, 0)
将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%，元素和内容占用像素比为0*0，所以看不到此元素及其内容，也无法点击。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: scale(0, 0)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: scale(0,0);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>width: 0;height: 0;overflow: hidden
将width和height都设置为0，使元素占用像素比为0*0，但此时会出现两种情况：
当元素的display属性为inline时，元素内容会将元素宽高拉开；
当元素的display属性为block或inline-block时，元素宽高为0，但元素内容依旧正常显示，此时再加上overflow:hidden;即可裁剪掉元素外的元素内容。
这个方法跟transform: scale(0,0)的不同点在于：transform: scale(0,0)是将元素与内容都进行缩放，而此方法是将元素缩放到0px，再裁剪掉元素外的元素内容。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>width: 0;height: 0;overflow: hidden</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
width:0;
height:0;
overflow: hidden;
border-width: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第五种：脱离屏幕显示位置
脱离屏幕显示位置同样可以使元素不可见，但是达到这种效果的css样式太多了，这里只举例一种情况说明。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>脱离屏幕显示位置</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
position: fixed;
top: -100px;
left: -100px;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>关于“css3如何控制元素隐藏”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
