Dalam tutorial JavaScript ini, Anda akan mempelajari 14 skenario umum yang mungkin akan Anda temui jika Anda belum melakukannya saat bekerja dengan gambar
1. Tampilkan Gambar dalam HTML Biasa
Buat tag gambar statis dengan atribut src dengan URL gambar di file HTML
<img src="//picsum.photos/200/300" />keluaran
Seperti yang Anda lihat, saya menggunakan situs web picsum untuk tujuan demonstrasi. Itu memungkinkan saya mendapatkan URL gambar acak dengan dimensi spesifik yang diteruskan di akhir URL
Cukup lurus ke depan, bukan?
Mari kita lihat cara mengatur atribut src secara dinamis melalui JavaScript selanjutnya
2. Tetapkan Atribut Src di JavaScript
Di file HTML, buat tag gambar HTML seperti itu
<img/> _Di JavaScript, dapatkan referensi ke tag gambar menggunakan metode querySelector()
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";Direkomendasikan → Variabel JS
Kemudian, tetapkan URL gambar ke atribut src dari elemen gambar
Alternatifnya, Anda dapat menyetel atribut src ke tag gambar menggunakan sintaks tanda kurung siku seperti ini
img["src"] = "//picsum.photos/200/301";keluaran
3. Tetapkan Beberapa Atribut Src di JavaScript
Katakanlah Anda memiliki tiga elemen gambar di halaman HTML di bagian yang berbeda
<img/> // image 1 ... <img/> // image 2 ... <img/> // image 2_Dengan menggunakan atribut ID atau class, Anda dapat dengan mudah menargetkan setiap elemen gambar secara terpisah untuk menetapkan nilai yang berbeda pada atribut src yang akan saya bahas nanti di bab ini
Izinkan saya menunjukkan kepada Anda apa yang 🛑 TIDAK boleh dilakukan ketika memiliki banyak tag gambar statis di halaman HTML Anda
const img = document.querySelector("img");Pada contoh sebelumnya, saya menggunakan metode querySelector() untuk menargetkan elemen gambar yang berfungsi dengan baik untuk satu elemen gambar
Untuk mendapatkan referensi ke ketiga elemen gambar, kita perlu menggunakan querySelectorAll()
Ini akan mendapatkan semua referensi elemen gambar dan membuat Node List Array darinya
img[0].src = "//picsum.photos/200/301"; // image 1 img[1].src = "//picsum.photos/200/302"; // image 2 img[2].src = "//picsum.photos/200/303"; // image 3Ini berfungsi dengan baik, tetapi ada satu masalah dengan pendekatan ini
Katakanlah Anda tidak lagi membutuhkan elemen gambar pertama dan menghapusnya dari kode HTML
Tebak apa?
Elemen gambar kedua dan ketiga akan memiliki gambar pertama dan kedua
4. Buat Elemen Gambar di JavaScript
Buat elemen gambar menggunakan metode img["src"] = "//picsum.photos/200/301";3 pada objek dokumen
Kemudian, setel URL gambar ke atribut src-nya
const img = document.createElement("img"); img.src = "//picsum.photos/200/301"; document.body.appendChild(img);_Terakhir, tambahkan elemen gambar ke hierarki DOM dengan menambahkannya ke elemen body
Sebagai alternatif, Anda dapat menggunakan konstruktor img["src"] = "//picsum.photos/200/301";_4 yang membuat instance HTMLImageElement baru dan fungsinya setara dengan dokumen. buatElemen(“img”)
Secara opsional, Anda dapat memberikan parameter lebar dan tinggi ke sana
const img = new Image(100, 200); // width, height img.src = "//picsum.photos/200/301"; document.body.appendChild(img);Ini akan setara dengan ini di HTML
<img/> _05. Tambahkan Gaya Inline ke Gambar di JavaScript
Dengan menggunakan properti style, kita dapat menerapkan style ke elemen gambar secara langsung di JavaScript
Seperti yang Anda lihat pada contoh di bawah ini, saya telah menerapkan gaya border serta borderRadius ke dalamnya
<img/> _16. Tambahkan Atribut ID ke Gambar di JavaScript
Menambahkan beberapa gaya ke elemen gambar satu per satu akan membosankan
Sebagai gantinya, mari buat aturan CSS baru di dalam tag gaya atau file CSS eksternal dengan pemilih ID seperti di bawah ini
<img/> _2Kemudian, tetapkan ke atribut ID dari elemen gambar menggunakan properti ID-nya
Seperti yang Anda ketahui, ini cukup mudah karena nilai atribut ID tidak boleh digandakan dalam satu halaman
Sebagai alternatif, Anda dapat memanggil metode img["src"] = "//picsum.photos/200/301";_5 pada objek img["src"] = "//picsum.photos/200/301";6 dengan dua argumen. nama atribut dan nilai
<img/> _47. Tambahkan Atribut Kelas ke Gambar di JavaScript
Berbeda dengan atribut ID, Anda dapat menambahkan beberapa nama kelas dalam satu elemen gambar atau nama kelas yang sama dalam beberapa elemen gambar atau kombinasi keduanya
Katakanlah kita memiliki aturan CSS dengan nama kelas yang disebut. img-rounded-border
<img/> _5Kemudian, kita bisa menambahkan kelas ini ke elemen gambar menggunakan metode add() pada properti classList dengan meneruskan nama kelas sebagai argumen
<img/> _6Jika Anda ingin menambahkan kelas lain ke elemen gambar yang sama, Anda harus menggunakan metode add() lagi
<img/> _7Sebagai alternatif, Anda dapat menggunakan metode setAttribute() untuk menambahkan satu atau beberapa atribut kelas ke elemen gambar dalam satu baris
<img/> _8Saat Anda menggunakan setAttribute, semua kelas sebelumnya yang ditambahkan ke elemen akan disetel ulang
8. Lampirkan Acara Klik ke Elemen Gambar
Untuk melampirkan peristiwa klik ke elemen gambar, aktifkan metode addEventListener() pada objek img
Ini akan membutuhkan dua argumen
- klik = nama acara dan
- function() {} = fungsi panggilan balik
9. Alihkan Pemilih CSS Saat Gambar Diklik
Katakanlah Anda ingin menambah dan menghapus batas gambar saat pengguna mengkliknya menggunakan kelas. img-rounded-border
<img/> _5Yang harus Anda lakukan adalah memanggil metode toggle() dengan meneruskan nama kelas sebagai argumen pada properti classList di dalam fungsi panggilan balik peristiwa klik
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";1Alternatifnya, objek acara yang diteruskan ke fungsi panggilan balik dapat digunakan untuk mengakses elemen gambar untuk menambah atau menghapus kelas
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";210. Dapatkan Item Gambar yang Dipilih Saat Diklik
Kita bisa mendapatkan informasi apa pun tentang item yang dipilih menggunakan objek event yang diteruskan ke fungsi callback seperti yang saya sebutkan sebelumnya
Katakanlah Anda ingin mendapatkan url gambar yang dipilih
Menggunakan e. target. src, Anda dapat dengan mudah mendapatkan URL gambar yang merupakan nilai dari atribut src
11. Buat Banyak Gambar dalam JavaScript
Katakanlah kita ingin membuat 10 gambar secara dinamis
Pertama, ulangi 10 kali menggunakan for loop
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";_4Kemudian, buat elemen gambar di dalam loop dan atur atribut src dengan url gambar acak dari picsum
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";5Tambahkan semua 10 gambar ke elemen body
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";6Mari beri jarak di antara gambar.
Buat aturan CSS baru di dalam tag gaya atau file CSS eksternal
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";7Kemudian, tambahkan ke elemen gambar di dalam loop menggunakan metode add()
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";_812. Gaya Bersyarat dalam Gambar Lingkaran
Mari ubah gambar tertentu dengan gaya yang berbeda
Mari ubah properti borderRadius untuk item ke-6 menggunakan kondisi if
const img = document.querySelector("img"); img.src = "//picsum.photos/200/301";_913. Tambahkan Peristiwa Klik ke Semua Gambar
Lampirkan metode addEventListener() ke elemen img pada setiap iterasi yang memerlukan dua argumen
- klik = nama acara dan
- function() {} = fungsi panggilan balik
Pastikan untuk menggunakan let alih-alih var di header for loop saat mendeklarasikan variabel i untuk menghindari pengangkatan yang merupakan salah satu masalah umum yang akan Anda alami saat menangani peristiwa klik di dalam loop seperti ini
img["src"] = "//picsum.photos/200/301";0Untuk mempelajari lebih lanjut tentang mengangkat, lihat blog saya yang lain
Menambahkan Click Event Listeners Dalam Sebuah Loop Di JavaScript
14. Terapkan Kelas CSS Hanya Untuk Gambar yang Diklik
Karena saya telah menambahkan kelas img-margin ke setiap elemen img, itu akan memberi ruang di antara gambar pada pemuatan awal
img["src"] = "//picsum.photos/200/301";1Ketika elemen img diklik, kelas img-rounded-border akan ditambahkan ke elemen tersebut yang akan menunjukkan batas tebal berwarna merah di sekelilingnya
Bagus
Tetapi bagaimana jika kita ingin menambahkan kelas img-rounded-border hanya ke elemen gambar yang dipilih dan tidak ke yang lainnya?
Salah satu solusi untuk memperbaikinya adalah dengan menghapus. img-rounded-border dari semua gambar terlebih dahulu sebelum menambahkannya ke gambar yang diklik
img["src"] = "//picsum.photos/200/301";2Bekerja dengan gambar dalam JavaScript selalu menyenangkan. Saya harap Anda menikmati tutorial dari 14 skenario umum yang bekerja dengan gambar ini.
Saya tahu ada lebih banyak skenario daripada ini. Tolong beri tahu saya jika Anda ingin saya menambahkan sesuatu ke tutorial ini