CSS-Tipps: DIV über das Anzeigeattribut anzeigen und ausblenden
Als eines der am häufigsten verwendeten Elemente in Seiten wird DIV häufig für Layout, Formatierung und Inhaltssegmentierung verwendet. In der tatsächlichen Entwicklung müssen wir manchmal das Anzeigen und Ausblenden eines DIV-Elements über Code steuern. In diesem Fall können wir das Anzeigeattribut von CSS verwenden.
Die Rolle des Anzeigeattributs
Das Anzeigeattribut ist ein grundlegendes Attribut in CSS, mit dem gesteuert wird, ob ein Element angezeigt wird. Es kann auf verschiedene Werte eingestellt werden, um unterschiedliche Anzeige- und Ausblendeffekte zu erzielen. Im Einzelnen lauten die Werte des Anzeigeattributs wie folgt:
Anzeige und Ausblenden von DIV realisieren
Als nächstes werden wir anhand mehrerer Beispiele demonstrieren, wie das Anzeigeattribut zum Anzeigen und Ausblenden von DIV verwendet wird.
In diesem Beispiel steuern wir das Anzeigen und Ausblenden von DIV über eine Schaltfläche.
HTML-Teil:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS显示和隐藏DIV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="toggle()">点击显示/隐藏DIV</button>
<div id="myDiv" style="display:none;">这是一个DIV元素</div>
<script src="js/main.js"></script>
</body>
</html>CSS-Teil:
#myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}JavaScript-Teil:
function toggle() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}In diesem Beispiel haben wir ein Onclick-Ereignis zum Schaltflächenelement von HTML hinzugefügt und eine Umschaltfunktion definiert. Diese Funktion ruft das DIV-Element ab, das wir über die Methode getElementById steuern müssen, und realisiert dann die Anzeige- und Ausblendeffekte durch Beurteilen des Anzeigeattributwerts des Elements.
Wenn wir auf die Schaltfläche klicken, bestimmt die Umschaltfunktion, ob der Anzeigeattributwert des aktuellen DIV-Elements „none“ ist. Wenn ja, wird es auf „Blockieren“ gesetzt, das heißt, es wird angezeigt auf none gesetzt, das heißt, es wird ausgeblendet.
In diesem Beispiel steuern wir das Anzeigen und Ausblenden von DIVs, indem wir mit der Maus über das Element fahren.
HTML-Teil:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS显示和隐藏DIV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myDiv">
<p>鼠标悬停在这里，显示下面的DIV元素</p>
<div id="myPopup">这是一个DIV元素</div>
</div>
</body>
</html>CSS-Teil:
#myDiv {
width: 200px;
height: 80px;
background-color: #eee;
position: relative;
}
#myPopup {
width: 100px;
height: 100px;
background-color: #ddd;
display: none;
position: absolute;
top: 100%;
left: 0;
}
#myDiv:hover #myPopup {
display: block;
}In diesem Beispiel verwenden wir: Hover-Selektor, um DIV-Elemente anzuzeigen und auszublenden. Wenn die Maus über das myDiv-Element fährt, wird das myPopup-Element angezeigt. Wenn die Maus das myDiv-Element verlässt, wird das myPopup-Element ausgeblendet. Zu diesem Zeitpunkt müssen wir nur den Anzeigeattributwert des myPopup-Elements auf „none“ oder „block“ setzen.
In diesem Beispiel verwenden wir den CSS3-Übergangsanimationseffekt, um die Anzeige und Ausblendung von DIV-Elementen reibungsloser und natürlicher zu gestalten.
HTML-Teil:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS显示和隐藏DIV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="toggle()">点击显示/隐藏DIV</button>
<div id="myDiv">这是一个DIV元素</div>
<script src="js/main.js"></script>
</body>
</html>CSS-Teil:
#myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all .3s ease-in-out;
}JavaScript-Teil:
function toggle() {
var div = document.getElementById("myDiv");
if (div.style.opacity === "0") {
div.style.display = "block";
div.style.opacity = "1";
} else {
div.style.opacity = "0";
setTimeout(function() {div.style.display = "none";}, 300);
}
}In diesem Beispiel definieren wir einen All-.3s-Ease-in-out-Übergangseffekt für das myDiv-Element in CSS, sodass, wenn wir When the Wenn der Anzeigeattributwert oder der Opazitätsattributwert des myDiv-Elements geändert wird, wird entsprechend diesem Effekt ein sanfter Übergang durchgeführt.
In JavaScript verwenden wir die Funktion setTimeout, um die Ausführung eines Codeblocks zu verzögern und auf den Abschluss des Übergangseffekts zu warten. Wenn wir auf die Schaltfläche klicken, bestimmt die Umschaltfunktion, ob der Deckkraftattributwert des aktuellen DIV-Elements 0 ist. Wenn ja, wird er auf 1 gesetzt und der Anzeigeattributwert wird auf Block gesetzt, also angezeigt. Wenn nicht, wird es auf 0 gesetzt, dann wird gewartet, bis der Übergang abgeschlossen ist, und schließlich wird der Wert des Anzeigeattributs auf „Keine“ gesetzt, das heißt, es wird ausgeblendet.
Zusammenfassung
Anhand der obigen drei Beispiele können wir sehen, dass das Anzeigeattribut von CSS den Anzeige- und Ausblendeffekt von DIV-Elementen leicht realisieren kann, und während des Implementierungsprozesses können wir die Hilfe von JavaScript und CSS3 verwenden, um dies zu erreichen Wirkung reicher und natur. Ich hoffe, dieser Artikel kann jedem helfen, das Anzeigeattribut von CSS zu beherrschen!
Das obige ist der detaillierte Inhalt vondiv CSS anzeigen div ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
