css3控制元素隱藏的方式有哪些
- 青灯夜游原創
- 2022-01-13 13:49:061628瀏覽
控制方式：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>（學習影片分享：css影片教學）
以上是css3控制元素隱藏的方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css3偽類和偽元素是什麼意思下一篇：css3偽類和偽元素是什麼意思