So verstecken Sie Bilder mit JavaScript

JavaScript ist eine Programmiersprache für die Frontend-Entwicklung, die durch einige Tricks und Methoden Bilder verbergen kann. In diesem Artikel werden einige gängige Tipps und Methoden zum Ausblenden von Bildern besprochen.

1. Anzeigeattribut

Das Anzeigeattribut ist ein Attribut, das in CSS verwendet wird, um das Anzeigen und Ausblenden von Elementen zu steuern. Das Standardattribut zum Anzeigen von Bildern ist „blockieren“, während das Attribut zum Ausblenden von Bildern „none“ ist. Mithilfe von JavaScript können Sie das Ausblenden und Anzeigen steuern, indem Sie das Anzeigeattribut des Bildelements abrufen.

Zum Beispiel kann der folgende Code das Bild ausblenden:

let img = document.getElementById("image");
img.style.display = "none";

Wenn Sie das Bild anzeigen möchten, setzen Sie natürlich einfach das Anzeigeattribut zurück:

let img = document.getElementById("image");
img.style.display = "block";

2. Deckkraftattribut

Das Deckkraftattribut wird verwendet, um die Deckkraft eines Elements zu steuern. Wenn die Opazitätseigenschaft 0 ist, ist das Element vollständig transparent, was bedeutet, dass das Bild ausgeblendet wird. Steuern Sie auf ähnliche Weise das Ausblenden und Anzeigen, indem Sie das Deckkraftattribut des Bildelements abrufen.

Das Folgende ist der JavaScript-Code zum Ausblenden des Bildes:

let img = document.getElementById("image");
img.style.opacity = "0";

Um das Bild anzuzeigen, setzen Sie einfach das Deckkraftattribut zurück:

let img = document.getElementById("image");
img.style.opacity = "1";

3. Sichtbarkeitsattribut# 🎜🎜#

let img = document.getElementById("image");
img.style.visibility = "hidden";

let img = document.getElementById("image");
img.style.visibility = "visible";

<img id="image" src="example.jpg" class="hidden">

.hidden {
  display: none;
}

let img = document.getElementById("image");

// 隐藏图片
img.classList.add("hidden");

// 显示图片
img.classList.remove("hidden");

Die oben genannten Methoden sind einige gängige Methoden zum Ausblenden von Bildern. Sie können die geeignete Methode entsprechend Ihren Anforderungen auswählen. Es ist zu beachten, dass verschiedene Methoden je nach persönlichen Vorlieben und Projektanforderungen unterschiedliche Vor- und Nachteile haben können. Daher müssen Sie die richtige Methode zum Ausblenden von Bildern zum richtigen Zeitpunkt wählen.

Das obige ist der detaillierte Inhalt vonSo verstecken Sie Bilder mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!