9 Möglichkeiten zum Ein- und Ausblenden von CSS-Elementen

Bei der Erstellung von Webseiten ist das Anzeigen und Ausblenden von Elementen eine sehr häufige Anforderung. Dieser Artikel stellt 9 Ideen zum Anzeigen und Ausblenden von Elementen vor

Anzeige

Die gängigste Methode zum Anzeigen und Ausblenden eines Elements ist display:none | display:block. Bei dieser Methode gibt es jedoch ein Problem. Das Anzeigeattribut eines Elements ist nicht immer „block“, bevor es ausgeblendet wird. Es kann auch „inline“, „inline-block“ usw. sein.

Hinweis: Wenn Sie es auf ein beliebiges Element anwenden möchten, müssen Sie den Anzeigewert des Elements im Voraus speichern

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testtext</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.style.display = "Block";
}    
ausblenden.onclick = function(){
    test.style.display = "keine";
}
</Skript>

Sichtweite

Visibility:hidden und display:none sind zwei Möglichkeiten zum Ausblenden von Elementen und werden oft verglichen. Tatsächlich ist der Unterschied ganz einfach. Ersteres verlässt den Dokumentfluss nicht und behält den physischen Bereich bei, den das Element vor dem Ausblenden einnimmt. Letzteres ist vom Dokumentfluss getrennt und die Seite muss neu gezeichnet werden, wenn sie erneut angezeigt wird. Es gibt noch einen weiteren Unterschied, den nur wenige Leute erwähnen. Wenn das übergeordnete Element auf display:none eingestellt ist, wird das untergeordnete Element nicht angezeigt, wenn es auf display:block eingestellt ist. Wenn das übergeordnete Element jedoch auf visibility:hidden eingestellt ist, wird das untergeordnete Element angezeigt, wenn visibility:visible eingestellt ist.

Hinweis: Visilibity kann das Übergangsattribut anwenden. Da die Sichtbarkeit ein diskreter Schritt im Bereich von 0 bis 1 ist, bedeutet 0 „verborgen“ und 1 „angezeigt“. Sichtbarkeit:Versteckt kann als Sichtbarkeit:0 angesehen werden; Sichtbarkeit:Sichtbar kann als Sichtbarkeit:1 angesehen werden. Daher ist die Sichtbarkeit beim Anwenden eines Übergangs gleichwertig mit dem Übergangseffekt zwischen 0 und 1. Tatsächlich wird es angezeigt, solange der Sichtbarkeitswert größer als 0 ist. Aufgrund dieses Phänomens können wir Übergänge verwenden, um die Anzeige und das Ausblenden von Elementen zu verzögern.

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testtext</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.style.transition = "keine";
    test.style.visibility = "sichtbar";
}    
ausblenden.onclick = function(){
    test.style.transition = 'Sichtbarkeit 0,2 s 0,5 s';
    test.style.visibility = "versteckt";
}
</Skript>

versteckt

Manche Leute sind damit vielleicht nicht vertraut. HTML hat ein globales Attribut „hidden“, das speziell zum Anzeigen versteckter Elemente verwendet wird. Es ähnelt display:none. Wenn ein Element versteckt ist, befindet es sich außerhalb des Dokumentflusses und kann keine JavaScript-Ereignisse empfangen.

Hinweis: IE10 unterstützt die Methode test.hidden='hidden' nicht, sondern nur die Methode test.setAttribute('hidden','hidden')

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testtext</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.removeAttribute('versteckt');
    /*test.hidden = '';*/
}    
ausblenden.onclick = function(){
    test.setAttribute('versteckt','versteckt');
    /*test.hidden = "versteckt";*/
}
</Skript>    

Opazität

Opazität wird auch häufig verwendet, um Elemente sichtbar und unsichtbar zu machen. Der Vorteil der Opazität besteht darin, dass selbst ein Element mit einer Opazität von 0 immer noch JavaScript-Ereignisse empfangen kann, was für display:none und visibility:hidden nicht verfügbar ist.

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<button id="reset">Zurücksetzen</button>
<div id="test">Testtext</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.style.transition = "keine";
    test.stil.opacity = "1";
}    
ausblenden.onclick = function(){
    test.style.transition = 'Deckkraft 0,2 s';
    test.stil.opacity = "0";
}
test.onclick = Funktion(){
    diese.Stil.Breite = "200px";
}
zurücksetzen.beiKlick = Funktion(){
    Geschichte.go();
}
</Skript>  

Überlauf

Es gibt eine CSS-Eigenschaft namens „Overflow“. „overflow:hidden“ bedeutet, dass „Overflow“ ausgeblendet ist. Wir können den Overflow:hidden des übergeordneten Elements mit der Höhe:0 oder Breite:0 des übergeordneten Elements verwenden, um das Element sichtbar und unsichtbar zu machen.

Hinweis: Wenn sich das Element mit Überlauf zwischen dem absolut positionierten Element und seinem enthaltenden Block befindet, wird die Überlaufeigenschaft ungültig.

<Stil>
#testWrap{
    Höhe: 70px;
    Übergang: Höhe 1s;
    Überlauf: versteckt;
}
</Stil>

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="testWrap">
    <div id="test">Testinhalt</div>        
</div>

<Skript>
anzeigen.onclick = Funktion(){
    testWrap.style.height = "70px";
}    
ausblenden.onclick = function(){
    testWrap.style.height = "0";
}
</Skript>    

Beschneiden

Das CSS-Clipping-Attribut wird nicht oft verwendet. Wenn top>=bottom oder left>=right in clip:rect(top,right,bottom,left) ist, kann das Element ausgeblendet werden, was Sichtbarkeit:hidden ähnelt.

Hinweis: Das Clip-Attribut kann nur auf absolut positionierte Elemente angewendet werden.

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>    

<Skript>
anzeigen.onclick = Funktion(){
    test.style.position = "statisch";
    test.style.clip = "auto";
}    
ausblenden.onclick = function(){
    test.style.position = "absolut";
    test.style.clip = "Rechteck(0 0 0 0)";
}
</Skript>    

verwandeln

CSS-Transformation ist eine Sammlung von Effekten, hauptsächlich die vier Grundoperationen Verschieben, Drehen, Skalieren und Neigen. Durch Einstellen der Matrix können auch komplexere Effekte erzielt werden. Verschiedene Deformationsfunktionen können verwendet werden, um Elementsichtbarkeitseffekte zu erzielen

Hinweis: IE9-Browser werden nicht unterstützt, Safari3.1-8, Android2.1-4.4.4, IOS3.2-8.4 müssen alle Präfixe hinzufügen

【1】Skala

Bei transform:scale(0) wird das Element ausgeblendet

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>    

<Skript>
anzeigen.onclick = Funktion(){
    test.style.transform = "Skala(1)";
}    
ausblenden.onclick = function(){
    test.style.transform = "Skala(0)";
}
</Skript>    

【2】drehen

Bei transform:rotateX(90deg) wird das Element ausgeblendet

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.style.transform = "rotateX(0)";
}    
ausblenden.onclick = function(){
    test.style.transform = "rotateX(90deg)";
}
</Skript>

【3】Schiefe

Bei transform:skew(90deg) wird das Element ausgeblendet

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.style.transform = "Schiefe(0)";
}    
ausblenden.onclick = function(){
    test.style.transform = "Schiefe(90 Grad)";
}
</Skript>

Abdeckung

Mit positionierten Elementen können die Eigenschaften normaler Flusselemente überschrieben werden. Stellen Sie für das vorherige Pseudoelement die gleiche Größe ein und erzielen Sie den Sichtbarkeitseffekt durch Steuern der Positionierungsattribute des Pseudoelements.

<Stil>
#test:hover:vorher{
    Inhalt: "";
    Position: absolut;
    Breite: 100px;
    Höhe: 60px;
    Hintergrundfarbe: weiß;
}    
</Stil>

<div>Testinhalt</div>
//Bewegen Sie die Maus hinein und hinaus, um das Element ein- und auszublenden

Versatz

Eine weitere gängige Methode zum Ein- und Ausblenden von Elementen besteht darin, sie zu versetzen. Durch Verschieben der Elemente außerhalb des Ansichtsfensters kann ebenfalls der entsprechende Ein- und Ausblendeffekt erzielt werden.

【1】Rand oben

Verwenden Sie negative Ränder, um Elemente aus dem Fenster zu verschieben. Beachten Sie, dass Elemente mit negativen Rändern den normalen Fluss nicht verlassen und nachfolgende Elemente mitbewegt werden.

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>

<Skript>
anzeigen.onclick = Funktion(){
    test.style.marginTop = "10px";
}    
ausblenden.onclick = function(){
    test.style.marginTop = "-9999px";
}
</Skript>

【2】links

Verschieben Sie Elemente außerhalb des Ansichtsfensters, indem Sie die Offset-Eigenschaft relativ oder absolut positionierter Elemente festlegen

<Stil>
#prüfen{
    Position: relativ;
/* Position: absolut; */
}    
</Stil>

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>

 <Skript>
anzeigen.onclick = Funktion(){
    test.stil.left = "0";
}    
ausblenden.onclick = function(){
    test.style.left = "-9999px";
}
</Skript>    

【3】übersetzen

<button id="show">Anzeigen</button>
<button id="hide">Ausblenden</button>
<div id="test">Testinhalt</div>    

<Skript>
anzeigen.onclick = Funktion(){
    test.style.transform = "übersetzen(0,0)";
}    
ausblenden.onclick = function(){
    test.style.transform = "übersetzen(-9999px,-9999px)";
}
</Skript>    

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.