So zeigen und verbergen Sie Div-CSS

So zeigen und verbergen Sie Divs in CSS: 1. Verwenden Sie das Anzeigeattribut von CSS, um das Div auszublenden oder anzuzeigen. 2. Verwenden Sie das Sichtbarkeitsattribut von CSS, um das Div auszublenden oder anzuzeigen.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Drei Möglichkeiten, Divs mithilfe von CSS anzuzeigen oder auszublenden (der Unterschied zwischen Anzeige und Sichtbarkeit)

1. Verwenden Sie das Anzeigeattribut von CSS, um Divs auszublenden oder anzuzeigen:

Das Anzeigeattribut gibt den Typ des Felds an, das das Element enthält generieren soll, können Sie display:none verwenden, um ein Element auszublenden.

style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

2. Verwenden Sie das Sichtbarkeitsattribut von CSS, um das Div auszublenden oder anzuzeigen:

Das Sichtbarkeitsattribut gibt an, ob ein Element sichtbar ist: versteckt.

style="visibility: none;"
document.getElementById("div1").style.visibility="hidden";//隐藏
document.getElementById("div1").style.visibility="visible";//显示

Der Unterschied zwischen den Anzeige- und Sichtbarkeitsattributen: Das

display-Attribut legt fest, wie ein Element angezeigt werden soll, während das Sichtbarkeitsattribut angibt, ob ein Element sichtbar oder ausgeblendet sein soll.

Elemente ausblenden -display:none oder sichtbarkeit:versteckt

Verstecken Sie ein Element, indem Sie das Anzeigeattribut auf „Keine“ oder das Sichtbarkeitsattribut auf „versteckt“ setzen. Beachten Sie jedoch, dass diese beiden Methoden zu unterschiedlichen Ergebnissen führen.

visibility:hidden: Ein Element kann ausgeblendet werden, aber das ausgeblendete Element muss immer noch denselben Platz einnehmen wie zuvor, bevor es nicht ausgeblendet wurde. Das heißt, obwohl das Element ausgeblendet ist, wirkt es sich dennoch auf das Layout aus.

h1.hidden {visibility:hidden;}

display:none: Sie können ein Element ausblenden, und das ausgeblendete Element nimmt keinen Platz ein. Mit anderen Worten: Das Element wird nicht nur ausgeblendet, sondern auch der ursprünglich von dem Element eingenommene Platz verschwindet aus dem Seitenlayout.

h1.hidden {display:none;}

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

【Empfohlenes Lernen: CSS-Video-Tutorial】

Verwenden Sie die Methoden show() und hide() von JQuery, um ein Div anzuzeigen oder auszublenden:

• Methode show(), um ausgewählte Elemente anzuzeigen und auszublenden:

Hinweis: show() gilt für Elemente, die durch jQuery-Methoden und display:none in CSS ausgeblendet werden (Sie gelten für Elemente, die durch Visibility:hidden ausgeblendet werden).

Syntax: $ (selector).show(speed,easing,callback) Klicken Sie hier für Details zu bestimmten Parametern

$("button").click(function(){
    $("p").show();
});

• hide()-Methode zum Ausblenden des ausgewählten Elements:

Tipps: Dies hängt mit dem zusammen CSS-Attributanzeige: keine ähnlich.

Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (hat keinen Einfluss auf das Layout der Seite).

Syntax: $ (selector).hide(speed,easing,callback) Klicken Sie hier für Details zu bestimmten Parametern

$("button").click(function(){
    $("p").hide();
});

Das obige ist der detaillierte Inhalt vonSo zeigen und verbergen Sie Div-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!