So implementieren Sie CSS, um das Anzeigen und Ausblenden von DIV-Ebenen zu steuern-CSS-Tutorial-php.cn

So implementieren Sie CSS, um das Anzeigen und Ausblenden von DIV-Ebenen zu steuern

不言

Freigeben： 2018-06-14 17:10:58

Original

2959 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die Methode zum Steuern der Anzeige und Ausblendung der p-Ebene vor. Dies ist das Grundwissen, das beim Front-End-Lernen beherrscht werden muss. Es ist sehr gut und hat Referenzwert zusammen

Die Anzeige- und Sichtbarkeitseigenschaften in CSS

Die Anzeige- und Sichtbarkeitseigenschaften in CSS können HTML-Elemente einschließlich der p-Ebene ein- und ausblenden. Die beiden sehen sich sehr ähnlich und werden von vielen Menschen verwechselt. Die Eigenschaften der beiden werden im Folgenden vorgestellt:

display:none|block;

display:none;

Das HTML-Element ausblenden präzise, um das Element im Browser zu entfernen, ohne Platz auf dem Bildschirm zu beanspruchen. Wenn sich andere Elemente darunter befinden, wird es in diesen Bereich verschoben (zum Beispiel liegen 100 Yuan auf dem Tisch, und jetzt lege ich es in eine Schublade, um es zu verstecken, und alles andere kann auf den Tisch gelegt werden, wo die 100 Yuan werden platziert).

dispaly:block;

Zeigen Sie das ausgeblendete HTML-Element an, wenn ein anderes Element den Platz einnimmt, wird es nach unten verschoben und der Platz wird dem ursprünglichen Element zugewiesen. Besitz. (Nehmen Sie die 100 Yuan aus der Schublade und legen Sie sie zurück auf den Tisch).

visibility:hidden|visible;

visibility:hidden;

Verstecken Sie das Element, es ist wirklich versteckt, aber es belegt immer noch diesen Platz. Zu diesem Zeitpunkt (lagen 100 Yuan auf dem Tisch. Ich habe ihn mit einer Tischdecke abgedeckt, um ihn zu verbergen, aber das Geld war immer noch da).

visibility:visible;

Lassen Sie das Element anzeigen (entfernen Sie die Tischdecke und sehen Sie 100 Yuan).

Anzeige und Sichtbarkeit steuern also, ob das HTML-Element vorhanden ist bzw. ob es angezeigt wird. Das Anzeigeattribut definiert, ob das Element vorhanden ist oder nicht, während das Sichtbarkeitsattribut nur steuert, ob das Element tatsächlich angezeigt wird existiert noch.

Nehmen wir den Code:

<html>   
<head>   
<script type="text/javascript">   
function testDisplay()   
{   
    var pD = document.getElementById("testD");   
    if(pD.style.display=="none")   
    {   
        pD.style.display = "block";   
    }   
    else   
    {   
        pD.style.display = "none";   
    }   
}   
function testVisibility()   
{   
    var pV = document.getElementById("testV");   
    if(pV.style.visibility =="hidden")   
    {   
        pV.style.visibility ="visible";   
    }   
    else   
    {   
        pV.style.visibility = "hidden";   
    }   
}   
</script>   
</head>   
</body>   
<p id="testD" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Display   
        </p>   
    </p>   
</p>   
<p id="testV" style="border:#ddd 1px solid">   
    <p style="display:block;border:#ccc 2px solid">   
        <p style="visibility:visible;border:#aaa 2px solid">   
        Visibility   
        </p>   
    </p>   
</p>   
<input type="button" value="TestDisplay" onclick="testDisplay()"/>   
<input type="button" value="TestVisibility" onclick="testVisibility()"/>   
</body>   
</html>

Nach dem Login kopieren

Ich hoffe, dass er für das weitere Studium hilfreich ist Inhalt Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Über CSS Flex Flexibles Layout

Parsen des CSS3-Standard-Pseudoklassenselektors

Das obige ist der detaillierte Inhalt vonSo implementieren Sie CSS, um das Anzeigen und Ausblenden von DIV-Ebenen zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!