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
MySQL Serie 4 SQL-Syntax
Inhaltsverzeichnis Tutorial-Reihe 1. Einführung u...
Das Linux-Betriebssystem verwendet Python, um die Visualisierungsfunktion des Task-Managers zu implementieren
1. Python-Installation 1. Erstellen Sie einen Ord...
Schnellstart-Tutorial zum Nginx-Dienst
Inhaltsverzeichnis 1. Einführung in Nginx 1. Was ...
Einführung in MySQL-Anweisungskommentare
MySQL unterstützt drei Arten von Kommentaren: 1. ...
Zusammenfassung der Funktionsweise von JS auf Seiten innerhalb und außerhalb von Iframes
Inhaltsverzeichnis Holen Sie sich den Inhalt des ...
Was bei der Migration von MySQL auf 8.0 zu beachten ist (Zusammenfassung)
Passwortmodus PDO::__construct(): Der Server hat ...
Detaillierte Erläuterung der MySQL-Remoteverbindungsberechtigung
1. Melden Sie sich bei der MySQL-Datenbank an mys...
JavaScript-Entwurfsmuster, Lernadaptermuster
Inhaltsverzeichnis Überblick Code-Implementierung...
Zusammenfassung des JS-Ausführungskontexts und -umfangs
Inhaltsverzeichnis Vorwort Text 1. Konzepte im Zu...
Docker + Daocloud realisiert die automatische Erstellung und Bereitstellung von Front-End-Projekten
Die automatisierte Projektbereitstellung wird häu...
Detaillierte Erklärung zur Verwendung von awk unter Linux
Bevor wir awk lernen, sollten wir sed, grep, tr, ...
mysql Backup-Skript und halten Sie es für 7 Tage
Skriptanforderungen: Sichern Sie die MySQL-Datenb...
Detaillierte Erklärung des HTML-Tags <input> und wie man es deaktiviert
Definition und Verwendung Das <input>-Tag w...
Details zur Datenanzeige der Vue3-Listenschnittstelle
Inhaltsverzeichnis 1. Beispiel für die Anzeige de...
Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)
Inhaltsverzeichnis JS liest Datei FileReader doku...