Dalam tutorial JavaScript ini, Anda akan mempelajari 14 skenario umum yang mungkin akan Anda temui jika Anda belum melakukannya saat bekerja dengan gambar Show
1. Tampilkan Gambar dalam HTML BiasaBuat tag gambar statis dengan atribut src dengan URL gambar di file HTML
keluaran
Cukup lurus ke depan, bukan? Mari kita lihat cara mengatur atribut src secara dinamis melalui JavaScript selanjutnya 2. Tetapkan Atribut Src di JavaScriptDi file HTML, buat tag gambar HTML seperti itu _Di JavaScript, dapatkan referensi ke tag gambar menggunakan metode querySelector()
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
keluaran 3. Tetapkan Beberapa Atribut Src di JavaScriptKatakanlah Anda memiliki tiga elemen gambar di halaman HTML di bagian yang berbeda _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
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
Ini 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 JavaScriptBuat elemen gambar menggunakan metode 3 pada objek dokumenKemudian, setel URL gambar ke atribut src-nya _Terakhir, tambahkan elemen gambar ke hierarki DOM dengan menambahkannya ke elemen body Sebagai alternatif, Anda dapat menggunakan konstruktor _4 yang membuat instance HTMLImageElement baru dan fungsinya setara dengan dokumen. buatElemen(“img”)Secara opsional, Anda dapat memberikan parameter lebar dan tinggi ke sana
Ini akan setara dengan ini di HTML _05. Tambahkan Gaya Inline ke Gambar di JavaScriptDengan 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 _16. Tambahkan Atribut ID ke Gambar di JavaScriptMenambahkan 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 _2Kemudian, tetapkan ke atribut ID dari elemen gambar menggunakan properti ID-nya _3
Sebagai alternatif, Anda dapat memanggil metode _5 pada objek 6 dengan dua argumen. nama atribut dan nilai _47. Tambahkan Atribut Kelas ke Gambar di JavaScriptBerbeda 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 _5Kemudian, kita bisa menambahkan kelas ini ke elemen gambar menggunakan metode add() pada properti classList dengan meneruskan nama kelas sebagai argumen _6Jika Anda ingin menambahkan kelas lain ke elemen gambar yang sama, Anda harus menggunakan metode add() lagi _7Sebagai alternatif, Anda dapat menggunakan metode setAttribute() untuk menambahkan satu atau beberapa atribut kelas ke elemen gambar dalam satu baris _8
8. Lampirkan Acara Klik ke Elemen GambarUntuk melampirkan peristiwa klik ke elemen gambar, aktifkan metode addEventListener() pada objek img Ini akan membutuhkan dua argumen
_99. Alihkan Pemilih CSS Saat Gambar DiklikKatakanlah Anda ingin menambah dan menghapus batas gambar saat pengguna mengkliknya menggunakan kelas. img-rounded-border _5Yang harus Anda lakukan adalah memanggil metode toggle() dengan meneruskan nama kelas sebagai argumen pada properti classList di dalam fungsi panggilan balik peristiwa klik 1Alternatifnya, objek acara yang diteruskan ke fungsi panggilan balik dapat digunakan untuk mengakses elemen gambar untuk menambah atau menghapus kelas 210. Dapatkan Item Gambar yang Dipilih Saat DiklikKita 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 _311. Buat Banyak Gambar dalam JavaScriptKatakanlah kita ingin membuat 10 gambar secara dinamis Pertama, ulangi 10 kali menggunakan for loop _4Kemudian, buat elemen gambar di dalam loop dan atur atribut src dengan url gambar acak dari picsum 5Tambahkan semua 10 gambar ke elemen body 6Mari beri jarak di antara gambar. Buat aturan CSS baru di dalam tag gaya atau file CSS eksternal 7Kemudian, tambahkan ke elemen gambar di dalam loop menggunakan metode add() _812. Gaya Bersyarat dalam Gambar LingkaranMari ubah gambar tertentu dengan gaya yang berbeda Mari ubah properti borderRadius untuk item ke-6 menggunakan kondisi if _913. Tambahkan Peristiwa Klik ke Semua GambarLampirkan metode addEventListener() ke elemen img pada setiap iterasi yang memerlukan dua argumen
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
014. Terapkan Kelas CSS Hanya Untuk Gambar yang DiklikKarena saya telah menambahkan kelas img-margin ke setiap elemen img, itu akan memberi ruang di antara gambar pada pemuatan awal 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 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 Bagaimana cara mendapatkan array gambar dalam JavaScript?Array Gambar Dengan Image() Constructor
. // Buat HTMLImageElement biarkan myImage = new Image(width, height); .
Bagaimana cara menampilkan daftar gambar dalam JavaScript?you can use the combination of html & js. first, display your video and give it unique id (eg: ), then display image and add js to play video when clicked (eg:
Bagaimana cara menampilkan gambar dalam JavaScript?Langkah-langkah. . Create element in the HTML code.. Add style to element and set display properties to none.. Buat fungsi "show()" JavaScript yang dapat mengakses gambar dan mengubah properti tampilan untuk diblokir Tambahkan tombol dalam kode HTML yang memanggil fungsi "show()" saat pengguna mengkliknya Bagaimana Anda menampilkan array objek?Untuk menampilkan larik objek dengan benar, kita perlu memformat larik sebagai string JSON . JSON. stringify() memformat array dan memberikan cetakan yang benar. Kita dapat menggunakan tag |