Javascript ausblenden anzeigen

JavaScript wird in der Webentwicklung häufig verwendet, um interaktive Effekte zu erzielen, darunter das Ein- und Ausblenden von Elementen. In diesem Artikel erkläre ich Ihnen, wie Sie Elemente mithilfe von JavaScript ein- und ausblenden.

1. Verwenden Sie JavaScript, um Elemente auszublenden.

Um JavaScript zum Ausblenden eines Elements zu verwenden, besteht die einfachste Möglichkeit darin, das Stilattribut des Elements zu bedienen.

Zuerst müssen wir die Elemente ermitteln, die ausgeblendet werden müssen. Sie können die Methode document.getElementById() verwenden, um das Element mit einer angegebenen ID abzurufen, oder Sie können die Methode document.querySelector() verwenden, um das erste Element abzurufen, das mit dem CSS-Selektor übereinstimmt. Zum Beispiel:

// 获取元素
var ele = document.getElementById("myElement");
// 或者
var ele = document.querySelector(".myClass");

Als nächstes können wir es ausblenden, indem wir das Anzeigeattribut des Stilattributs des Elements auf „Keine“ setzen. Zum Beispiel:

ele.style.display = "none";

Auf diese Weise können wir den Effekt erzielen, Elemente auszublenden.

2. Verwenden Sie JavaScript, um Elemente anzuzeigen.

Ebenso ist es auch sehr einfach, JavaScript zum Anzeigen eines Elements zu verwenden. Setzen Sie einfach das Anzeigeattribut des Elements auf seinen Standardwert. Im Allgemeinen ist der Standardwert des Anzeigeattributs eines Elements Block, es können jedoch auch andere Werte (z. B. Inline) verwendet werden.

Bevor wir das Element anzeigen, müssen wir das Element abrufen, das angezeigt werden soll. Ebenso können Sie die Methode document.getElementById() oder document.querySelector() verwenden, um das angegebene Element abzurufen.

// 获取元素
var ele = document.getElementById("myElement");
// 或者
var ele = document.querySelector(".myClass");

Als nächstes können wir es anzeigen, indem wir das Anzeigeattribut des Stilattributs des Elements auf seinen Standardwert setzen. Zum Beispiel:

ele.style.display = "block";

3. Verwenden Sie JavaScript, um zwischen dem Ausblenden und Anzeigen von Elementen zu wechseln.

Jetzt haben wir gelernt, wie Sie JavaScript zum Ausblenden und Anzeigen von Elementen verwenden. Manchmal müssen wir jedoch den Anzeigestatus eines Elements ändern. Beispielsweise platzieren wir eine Schaltfläche auf der Seite, und durch Klicken auf die Schaltfläche kann der Anzeigestatus eines Elements geändert werden.

In diesem Fall können wir den folgenden Code verwenden, um den Anzeigestatus des Elements zu ändern:

var ele = document.getElementById("myElement"); // 获取元素
if (ele.style.display === "none") { // 判断元素是否被隐藏
   ele.style.display = "block"; // 如果被隐藏，则显示元素
} else {
   ele.style.display = "none"; // 如果正在显示中，则隐藏元素
}

Dieser Code ruft zunächst das angegebene Element ab und prüft, ob sein aktueller Anzeigeattributwert „None“ ist. Wenn dies der Fall ist, setzen Sie die Anzeigeeigenschaft auf Block, um sie sichtbar zu machen. Wenn nicht, setzen Sie die Anzeigeeigenschaft auf Keine, um sie auszublenden.

Jetzt müssen wir der Schaltfläche nur noch einen Klickereignis-Listener hinzufügen und den obigen Code aufrufen, um den Effekt des Wechselns des Anzeigestatus des Elements zu erzielen.

Bei der Seitenentwicklung verwenden wir häufig JavaScript, um Elemente auszublenden und anzuzeigen und so eine bessere Benutzerinteraktion zu erreichen. Durch die Einführung in diesem Artikel haben wir nicht nur gelernt, wie man Elemente ein- und ausblendet, sondern auch, wie man den Anzeigestatus von Elementen in JavaScript ändert.

Das obige ist der detaillierte Inhalt vonJavascript ausblenden anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!