css3控制元素隱藏的方式有哪些
2022-01-13 16:00:39
控制方式：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;/* user agent stylesheet中border-width: 2px; */
padding: 0;/* user agent stylesheet中padding: 1px 6px; */
}
</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控制元素隱藏的方式有哪些的詳細內容，更多請關注TW511.COM其它相關文章！