有趣的css實(shí)現(xiàn)隱藏元素的7種思路
發(fā)布時(shí)間：2021-02-02 16:03:31 作者：_Fatman 
我要評論
我要評論這篇文章主要介紹了有趣的css實(shí)現(xiàn)隱藏元素的7種思路，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
display、visibility、opacity三個(gè)屬性隱藏元素之間的異同點(diǎn)一直是前端面試面試的?？碱}。
| 屬性 | 值 | 是否在頁面上顯示 | 注冊點(diǎn)擊事件是否有效 | 是否存在于可訪問性樹中 |
|---|---|---|---|---|
| display | none | 否 | 否 | 否 |
| visibility | hidden | 否 | 否 | 是 |
| opacity | 0 | 否 | 是 | 是 |
除了display、visibility、opacity三個(gè)屬性可以隱藏元素之外，是否還存在其它屬性可以隱藏元素呢？它們之間又存在什么必然的聯(lián)系呢？這就是我們今天要討論的問題。
注：由于篇幅有限，本文并未提及一些像filter:alpha(opacity=0); zoom:0;之類的兼容屬性。
第一種：移除出可訪問性樹
display : none
display屬性可以設(shè)置元素的內(nèi)部和外部顯示類型。將display設(shè)置為none會(huì)將元素從可訪問性樹中移除。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>display : none</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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設(shè)置為hidden會(huì)使元素不可見，但此時(shí)元素仍然位于可訪問性樹中(display: none時(shí)元素被移出可訪問性樹 )，注冊點(diǎn)擊事件無效。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>visibility: hidden</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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設(shè)置為0會(huì)使元素完全透明，此時(shí)元素不可見(因?yàn)樗峭该鞯?，仍然位于可訪問性樹中，注冊點(diǎn)擊事件有效。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>opacity: 0</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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設(shè)置為transparent(透明)，此時(shí)元素不可見(因?yàn)樗峭该鞯?，仍然位于可訪問性樹中,注冊點(diǎn)擊事件有效。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transparent</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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)
從技術(shù)上說，transparent是 rgba(0,0,0,0) 的簡寫，將元素的background-color、color和border-color設(shè)置為rgba(0,0,0,0)(透明)，此時(shí)元素不可見(因?yàn)樗峭该鞯?，仍然位于可訪問性樹中,注冊點(diǎn)擊事件有效。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>rgba(0,0,0,0)</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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只需要第四個(gè)參數(shù)為0即可達(dá)到隱藏元素的效果。
hsla(0,0%,0%,0)
hsla使用元素隱藏的機(jī)制與rgba一致，都是由第四個(gè)參數(shù)Alpha所控制的，將元素的background-color、color和border-color設(shè)置為hsla(0,0%,0%,0)，此時(shí)元素不可見(因?yàn)樗峭该鞯?，仍然位于可訪問性樹中，注冊點(diǎn)擊事件有效。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>hsla(0,0%,0%,0)</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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一致，只需要第四個(gè)參數(shù)為0即可達(dá)到隱藏元素的效果。
filter: opacity(0%)
filter(濾鏡) opacity(0% ~ 100%)轉(zhuǎn)化圖像的透明程度,值范圍于0%(完全透明) ~ 100%(完全不透明)之間。將元素的filter設(shè)置為opacity(0%)，此時(shí)元素不可見(因?yàn)樗峭该鞯?，仍然位于可訪問性樹中，注冊點(diǎn)擊事件有效。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>filter: opacity(0%)</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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設(shè)置為scale(0, 0)會(huì)使元素在x軸和y軸上都縮放到0像素，此元素會(huì)顯示，也會(huì)占用位置，但是因?yàn)橐呀?jīng)縮放到0%，元素和內(nèi)容占用像素比為0*0，所以看不到此元素及其內(nèi)容，也無法點(diǎn)擊。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: scale(0, 0)</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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都設(shè)置為0，使元素占用像素比為0*0，但此時(shí)會(huì)出現(xiàn)兩種情況：
當(dāng)元素的display屬性為inline時(shí)，元素內(nèi)容會(huì)將元素寬高拉開；
當(dāng)元素的display屬性為block或inline-block時(shí)，元素寬高為0，但元素內(nèi)容依舊正常顯示，此時(shí)再加上overflow:hidden;即可裁剪掉元素外的元素內(nèi)容。
這個(gè)方法跟transform: scale(0,0)的不同點(diǎn)在于：transform: scale(0,0)是將元素與內(nèi)容都進(jìn)行縮放，而此方法是將元素縮放到0px，再裁剪掉元素外的元素內(nèi)容。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>width: 0;height: 0;overflow: hidden</title>
<style type="text/css">
div {
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;/* user agent stylesheet中border-width: 2px; */
padding: 0;/* user agent stylesheet中padding: 1px 6px; */
}
</style>
</head>
<body>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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>
第五種：旋轉(zhuǎn)
transform: rotateX(90deg)
將元素沿著X軸順時(shí)針旋轉(zhuǎn)90度達(dá)到隱藏元素的效果。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: rotateX(90deg)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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: rotateY(90deg)
將元素沿著Y軸順時(shí)針旋轉(zhuǎn)90度達(dá)到隱藏元素的效果。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: rotateY(90deg)</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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>
第六種：脫離屏幕顯示位置
脫離屏幕顯示位置同樣可以使元素不可見，但是達(dá)到這種效果的css樣式太多了，這里只舉例一種情況說明。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>脫離屏幕顯示位置</title>
<style type="text/css">
div {
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>
<div>
<button id="normal">按鈕</button>
</div>
<div>
<button id="bt">按鈕</button>
</div>
<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>
第七種：遮蓋
使用元素遮蓋也可以使元素不可見，因?yàn)檫_(dá)到這種效果的css樣式也很多，故這里只舉例一種情況說明。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>遮蓋</title>
<style type="text/css">
div {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#cover {
z-index: 1;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<button id="normal">按鈕</button>
</div>
<div style="position: relative;line-height: normal;">
<button id="bt">按鈕</button>
<div id="cover"></div>
</div>
<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>
參考
- [1] display | MDN
- [2] visibility | MDN
- [3] opacity | MDN
- [4] transform | MDN
- [5] overflow | MDN
- [6] color | MDN
- [7] transform | MDN
- [8] z-index | MDN
- [9] CSS3 顏色值RGBA表示方式
- [10] 一個(gè)也許很傻的問題,在圖像處理中alpha到底是什么?
到此這篇關(guān)于有趣的css實(shí)現(xiàn)隱藏元素的7種思路的文章就介紹到這了,更多相關(guān)css隱藏元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了css 元素顯示隱藏的9種思路,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-07
- 這篇文章主要介紹了使用CSS隱藏元素滾動(dòng)條的示例代碼,需要的朋友可以參考下2019-07-10
CSS 實(shí)現(xiàn)元素較寬不能被完全展示時(shí)將其隱藏的方法
最近做項(xiàng)目遇到這樣的需求，需要實(shí)現(xiàn)的樣式是固定寬度的容器里一排顯示若干個(gè)標(biāo)簽，數(shù)量不定，每個(gè)標(biāo)簽的長度也不定。下面小編給大家?guī)砹薈SS 實(shí)現(xiàn)元素較寬不能被完全展示2017-12-29- 這篇文章主要為大家詳細(xì)介紹了CSS隱藏頁面元素的5種方法，大家可以根據(jù)具體情況選擇適合的方法來隱藏元素，感興趣的小伙伴們可以參考一下2016-07-06
- 這篇文章主要為大家介紹了CSS“隱藏”元素的多種方法，并對CSS“隱藏”元素的多種方法進(jìn)行對比，感興趣的小伙伴們可以參考一下2016-02-17
- 在CSS中，讓元素隱藏（指屏幕范圍內(nèi)肉眼不可見）的方法很多，主要有占空間，不占空間；可以響應(yīng)點(diǎn)擊，不能響應(yīng)點(diǎn)擊的下面一個(gè)個(gè)列出，選一個(gè)適合你的2013-11-01
談?wù)凜SS隱藏元素(display,visibility)的區(qū)別
在CSS中，讓元素隱藏（指屏幕范圍內(nèi)肉眼不可見）的方法很多，有的占據(jù)空間，有的不占據(jù)空間；有的可以響應(yīng)點(diǎn)擊，有的不能響應(yīng)點(diǎn)擊2013-04-09css元素隱藏原理及display:none和visibility:hidden
在CSS中，讓元素隱藏指屏幕范圍內(nèi)肉眼不可見的方法很多，只不過有的依然保留空間，而有的卻消失的不留痕跡,接下來本文將詳細(xì)介紹下css元素隱藏原理，感興趣的你可不要錯(cuò)過2013-02-27
