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
Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System
Inhaltsverzeichnis Vorwort 1. Installieren Sie da...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein,...
Detaillierte Erklärung der berechneten Eigenschaften von Vue
1. Was ist ein berechnetes Attribut? Einfach ausg...
Detailliertes Beispiel für MySQL ähnlich dem Schreiben von Oracle Rownum
Rownum ist eine einzigartige Schreibmethode in Or...
CSS-Code zum Erstellen von 10 modernen Layouts
Vorwort Ich habe mir am Sonntag zu Hause das drei...
JavaScript-Selektorfunktionen querySelector und querySelectorAll
Inhaltsverzeichnis 1. querySelector fragt ein ein...
Detaillierte Erläuterung der default_server-Definition und der entsprechenden Regeln von nginx
Die default_server-Direktive von nginx kann einen...
Schnelles Verständnis und Beispielanwendung der Vuex-Zustandsmaschine
Inhaltsverzeichnis 1. Schnelles Verständnis von K...
Erläuterung des MySQL-Multitabellen-Join-Abfragebeispiels
In tatsächlichen Projekten gibt es Beziehungen zw...
Was sind Ihre Grundsätze für die Gestaltung von Indizes? Wie lassen sich Indexfehler vermeiden?
Inhaltsverzeichnis Primärschlüsselindex Erstellen...
Docker-Zeitzonenproblem und Datenmigrationsproblem
Neueste Lösung: -v /usr/share/zoneinfo/Asia/Shang...
Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?
Als Softwareentwickler müssen Sie über ein vollst...
Warum sollten MySQL-Felder NOT NULL verwenden?
Ich habe vor Kurzem in einer neuen Firma angefang...
Docker-Container vom Einstieg bis zur Obsession (empfohlen)
1. Was ist Docker? Jeder kennt virtuelle Maschine...