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
Womit kann ich dich, meinen Tisch, retten (Haiyu-Blog)
Tabellen spielten einst eine sehr wichtige Rolle ...
Linux-Checkup: Erfahren Sie mehr über Ihren Linux-Status (Netzwerk-E/A, Festplatte, CPU, Speicher)
Inhaltsverzeichnis 1. Kernbefehle 2. Allgemeine B...
Detaillierte Erklärung der Dreieckszeichnung und clevere Anwendungsbeispiele in CSS
führen Einige gängige Dreiecke auf Webseiten könn...
So unterstützen Sie vollständiges Unicode in MySQL/MariaDB
Inhaltsverzeichnis Einführung in utf8mb4 Fehler b...
Mögliche Gründe, warum das Eingabetag type="reset" in HTML ungültig ist (nicht funktioniert).
Bei Verwendung des Tags <html:reset> stellen...
Wie stellt MySQL die Master-Slave-Konsistenz sicher?
Inhaltsverzeichnis Das Grundprinzip von MySQL Mas...
Redo-Dateiwartungsmethode der InnoDB-Engine
Wenn Sie die Größe und Anzahl der InnoDB-Redo-Log...
MySQL implementiert den Vorgang zum Festlegen mehrerer Primärschlüssel
Benutzertabelle, ID-Nummer muss eindeutig sein, M...
So lösen Sie das Problem „Nginx 503-Dienst vorübergehend nicht verfügbar“
In letzter Zeit tritt nach dem Aktualisieren der ...
Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue
1. Dynamische Komponenten <!DOCTYPE html> &...
Ausführliche Erklärung zu Sitzung und Cookie in Tomcat
Vorwort HTTP ist ein zustandsloses Kommunikations...
CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion
Führen Sie kein Front-End-UI-Framework ein, es se...
Implementierung einer vereinfachten Version von JSON.stringify und seine sechs Hauptfunktionen im Detail erklärt
Inhaltsverzeichnis Vorwort Sechs Funktionen von J...
Lösung für den MySQL-Server-Anmeldefehler ERROR 1820 (HY000)
Fehlerseite: Melden Sie sich beim MySQL-Server an...
Zusammenfassung der Methoden zum Einbinden von Dateiinhalten in HTML-Dateien
Im Forum fragen Internetnutzer oft: „Kann ich den...