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 🎜>

Atribut keterlihatan digunakan untuk mengawal sama ada elemen boleh dilihat. Apabila atribut keterlihatan "tersembunyi", elemen itu akan disembunyikan. Begitu juga, anda boleh mengawal penyembunyian dan paparan dengan mendapatkan atribut keterlihatan elemen gambar.

Berikut ialah kod JavaScript untuk menyembunyikan imej:

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

Untuk memaparkan imej, hanya tetapkan semula atribut keterlihatan:

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

4 kelas

Cara lain untuk menyembunyikan imej ialah menggunakan kelas CSS. Tetapkan kelas dalam fail CSS dan tetapkan atribut paparan imej kepada tiada. Dalam JavaScript, anda boleh mengawal paparan dan menyembunyikan imej dengan mendapatkan elemen dan menambah atau mengalih keluar kelas ini.

Berikut ialah kod HTML dan CSS untuk menyembunyikan imej menggunakan kelas CSS:

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

.hidden {
  display: none;
}

Berikut ialah kod untuk menyembunyikan dan menunjukkan imej dalam JavaScript menggunakan kelas CSS:

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

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

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

Di atas adalah beberapa kaedah yang biasa untuk menyembunyikan gambar Anda boleh memilih kaedah yang sesuai mengikut keperluan anda. Perlu diingatkan bahawa kaedah yang berbeza mungkin mempunyai kelebihan dan kekurangan yang berbeza bergantung pada keutamaan peribadi dan keperluan projek. Oleh itu, anda perlu memilih kaedah yang betul untuk menyembunyikan gambar pada masa yang sesuai.

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