JavaScript zum Anzeigen und Ausblenden von Bildern
|
JavaScript zeigt und verbirgt Bilder. Zu Ihrer Information ist der spezifische Inhalt wie folgt Klicken Sie auf die Schaltfläche, um das Bild anzuzeigen und auszublenden (standardmäßig angezeigt). Fügen Sie den Code an:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Bilder anzeigen und ausblenden</title>
</Kopf>
<Text>
<button id="btn">Ausblenden</button>
<br>
<img src="img/image01.jfif" id="neueFreundin">
<Skripttyp="text/javascript">
// 1. Holen Sie sich die Ereignisquelle var obtn = document.getElementById("btn");
var newImg = document.getElementsByTagName("img")[0];
// var isShow = true; // Methode 2
// 2. Bindungsereignis obtn.onclick = function (){
// wenn (isShow) { // Methode 2
if (obtn.innerHTML === 'Ausblenden') {
// 3. Ereignistreiber newImg.style.display = 'none';
obtn.innerHTML = "Anzeige"; //
// isShow = false; // Methode 2
}anders {
neuesBild.style.display = "Block";
obtn.innerHTML = "Ausblenden";
// isShow = true; // Methode 2
}
}
</Skript>
</body>
</html>Es gibt zwei Implementierungsmethoden. Die Implementierung ist wie folgt:
Dies ist die Standardanzeigeoberfläche. Nach dem Klicken auf „Ausblenden“ sieht sie folgendermaßen aus:
Die einfache Funktion zum Anzeigen und Ausblenden von Bildern ist jetzt realisiert! 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. Das könnte Sie auch interessieren:
|
<<: Detaillierte Schritte zur Installation von MySql 5.7.21 unter Linux
>>: So installieren Sie eine ISO-Datei im Linux-System
Artikel empfehlen
Beispiel zum Erstellen eines MySQL-Clusters mit Docker
Grundlegende Anweisungen für Docker: Update-Paket...
GDB-Debugging, MySQL-Kompilierung und Installation des tatsächlichen Kampfquellcodes
Quellcode herunterladen Git-Klon https://github.c...
Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 für WinX64
Detailliertes Installations-Tutorial zur Dekompri...
Prinzipien der MySQL-Datentypoptimierung
MySQL unterstützt viele Datentypen und die Auswah...
So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert
So zentrieren Sie den gesamten Seiteninhalt und pa...
Beispielanalyse der MySQL-Indexabdeckung
Dieser Artikel beschreibt die MySQL-Indexabdeckun...
Einführung in die MySQL-Datenbank: Detaillierte Erläuterung des Datenbanksicherungsvorgangs
Inhaltsverzeichnis 1. Einzelne Datenbanksicherung...
Implementierung der React-Sternebewertungskomponente
Voraussetzung ist die Eingabe der Bewertungsdaten...
Tiefgreifendes Verständnis der Verwendung von CSS clear:both
clear:both wird zum清除浮動Das ist der Eindruck, den ...
Detaillierte Erläuterung der 8 Möglichkeiten zum Übergeben von Parametern in Vue-Routing-Komponenten
Wenn wir eine Single-Page-Anwendung entwickeln, m...
So importieren/speichern/laden/löschen Sie Bilder lokal in Docker
1. Docker importiert lokale Images Manchmal kopie...
Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)
1. Fügen Sie dem HTML-Header das Viewport-Tag hin...
Lösung für das Problem, dass Tomcat beim normalen Zugriff auf localhost eine 404-Meldung ausgibt
Als ich heute Tomcat für den Zugriff auf die Proj...
MySQL-Datenbank löscht doppelte Daten und behält nur eine Methodeninstanz bei
1. Problemeinführung Nehmen Sie ein Szenario an, ...
Detaillierte Erklärung zur Einführung benutzerdefinierter Schriftarten (Font-Face) in CSS
Warum habe ich das verwendet? Alles begann mit de...