Bagaimana untuk menyembunyikan gambar dengan JavaScript

JavaScript ialah bahasa pengaturcaraan yang digunakan untuk pembangunan bahagian hadapan Ia boleh menyembunyikan imej melalui beberapa helah dan kaedah. Dalam artikel ini, beberapa petua dan kaedah biasa untuk menyembunyikan gambar akan dibincangkan.

1. Atribut paparan

Atribut paparan ialah atribut yang digunakan dalam CSS untuk mengawal paparan dan penyembunyian elemen. Atribut standard untuk memaparkan imej ialah "blok", manakala atribut untuk menyembunyikan imej ialah "tiada". Menggunakan JavaScript, anda boleh mengawal penyembunyian dan paparan dengan mendapatkan atribut paparan elemen imej.

Sebagai contoh, kod berikut boleh menyembunyikan gambar:

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

Sudah tentu, jika anda ingin memaparkan gambar, hanya tetapkan semula atribut paparan:

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

2. Atribut kelegapan

Atribut kelegapan digunakan untuk mengawal kelegapan unsur. Apabila atribut kelegapan ialah 0, elemen itu akan menjadi telus sepenuhnya, yang bermaksud imej akan disembunyikan. Begitu juga, kawal penyembunyian dan paparan dengan mendapatkan atribut kelegapan elemen gambar.

Berikut ialah kod JavaScript untuk menyembunyikan imej:

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

Untuk memaparkan imej, tetapkan semula atribut kelegapan:

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

3 🎜>

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");

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan gambar dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!