Heim > Artikel > Web-Frontend > Welche Möglichkeiten gibt es, das Ausblenden von Elementen in CSS3 zu steuern?
Welche Möglichkeiten gibt es, das Ausblenden von Elementen in CSS3 zu steuern?
- 青灯夜游Original
- 2022-01-13 13:49:061571Durchsuche
Kontrollmethode: 1. Verwenden Sie die Anweisung „display:none“, um das Element aus dem Barrierefreiheitsbaum zu entfernen. 2. Verwenden Sie die Anweisung „visibility:hidden“, um das Element unsichtbar zu machen. 3. Verwenden Sie „; opacity: 0" "-Anweisung setzt das Element auf transparent; 4. Lassen Sie das Element von der Bildschirmanzeigeposition wegbewegen usw.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Wie CSS3 das Ausblenden von Elementen steuert
Der erste Weg: Entfernen Sie den Barrierefreiheitsbaum
display : nonedisplay : 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
<!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>Dritter Typ: Transparent
opacity: 0opacity (Opazität), Wertebereich 0 (völlig transparent) ~ 1 (völlig undurchsichtig), wird die Opazität auf einstellen 0 macht das Element vollständig transparent. In diesem Fall ist das Element nicht sichtbar (da es transparent ist), befindet sich weiterhin in der Barrierefreiheitsstruktur und die Registrierung von Klickereignissen ist gültig. <!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>
transparentSetzen Sie die Hintergrundfarbe, Farbe und Rahmenfarbe des Elements auf transparent (transparent). transparent), immer noch im Barrierefreiheitsbaum gelegen, ist die Registrierung von Klickereignissen möglich. Code: rrreee
rgba(0,0,0,0)Technisch gesehen ist transparent die Abkürzung von rgba(0,0,0,0), die den Hintergrund von ändert Die Elemente -color, color und border-color sind auf rgba(0,0,0,0) (transparent) gesetzt. Zu diesem Zeitpunkt ist das Element nicht sichtbar (da es transparent ist) und befindet sich noch in der Barrierefreiheitsstruktur Klickereignisse sind gültig. Code:
hsla(0,0%,0%,0)🎜🎜hsla verwendet den gleichen Mechanismus zum Ausblenden von Elementen wie rgba, beide werden durch den vierten Parameter Alpha gesteuert, der die Hintergrundfarbe des Elements ändert. color und border-color werden auf hsla(0,0%,0%,0) gesetzt. Zu diesem Zeitpunkt ist das Element nicht sichtbar (da es transparent ist), befindet sich noch im Barrierefreiheitsbaum und die Registrierung von Klickereignissen ist gültig . 🎜🎜Code: 🎜rrreee🎜hsla ist dasselbe wie rgba. Nur der vierte Parameter ist 0, um den Effekt des Ausblendens von Elementen zu erzielen. 🎜🎜
filter: opacity(0%)🎜🎜filter (filter) opacity (0% ~ 100%) wandelt die Transparenz des Bildes um, der Wertebereich liegt bei 0% (völlig transparent). ) ~ 100 % (völlig undurchsichtig). Stellen Sie den Filter des Elements auf Deckkraft (0 %) ein. Zu diesem Zeitpunkt ist das Element unsichtbar (da es transparent ist) und befindet sich weiterhin in der Barrierefreiheitsstruktur. 🎜🎜Code: 🎜rrreee🎜🎜Viertens: Skalieren🎜🎜🎜transform: scale(0, 0)🎜🎜Wenn Sie „transform“ auf „scale(0, 0)“ setzen, wird das Element auf der x-Achse erstellt und Die y-Achse wird auf 0 Pixel skaliert. Dieses Element wird angezeigt und nimmt die Position ein. Da es jedoch auf 0 % skaliert wurde, beträgt das von dem Element und dem Inhalt eingenommene Pixelverhältnis 0*0, also dieses Element und sein Inhalte können nicht gesehen und nicht angeklickt werden. 🎜🎜Code: 🎜rrreee🎜width: 0;height: 0;overflow: versteckt🎜🎜Setzen Sie sowohl Breite als auch Höhe auf 0, sodass das vom Element belegte Pixelverhältnis 0*0 beträgt, aber Zu diesem Zeitpunkt treten zwei Situationen auf: 🎜🎜🎜🎜Wenn das Anzeigeattribut des Elements inline ist, dehnt der Elementinhalt die Breite und Höhe des Elements aus. 🎜🎜🎜🎜Wenn das Anzeigeattribut des Elements Block oder ist Inline-Block, die Breite und Höhe des Elements sind 0, der Elementinhalt wird jedoch weiterhin normal angezeigt. Durch Hinzufügen von overflow:hidden kann der Elementinhalt außerhalb des Elements abgeschnitten werden. 🎜🎜🎜🎜Der Unterschied zwischen dieser Methode und transform:scale(0,0) besteht darin, dass transform:scale(0,0) sowohl das Element als auch den Inhalt skaliert, während diese Methode das Element auf 0px skaliert und es dann zuschneidet Inhalt außerhalb des Elements. 🎜🎜Code: 🎜rrreee🎜🎜Der fünfte Weg: Off-the-Screen-Anzeigeposition🎜🎜🎜Off-the-Screen-Anzeigeposition kann das Element auch unsichtbar machen, aber es gibt zu viele CSS-Stile, um diesen Effekt zu erzielen eine Situation. 🎜🎜Code: 🎜rrreee🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜)🎜Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, das Ausblenden von Elementen in CSS3 zu steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was bedeuten CSS3-Pseudoklassen und Pseudoelemente?Nächster Artikel：Was bedeuten CSS3-Pseudoklassen und Pseudoelemente?
In Verbindung stehende Artikel
Mehr sehen- So erreichen Sie einen linearen Hintergrundverlauf in CSS3
- Was verwendet CSS3, um Nachkommenselektoren darzustellen?
- So implementieren Sie das Verschwinden einer Animation nach einigen Sekunden in CSS3
- CSS3-Clip-Path-Eigenschaft in Aktion: dynamisches Zuschneiden von Bereichen
- Welche verwandten Eigenschaften hat die CSS3-Animation?