Cara beralih kelas pada elemen dengan JavaScript adalah salah satu keterampilan paling praktis yang dapat Anda pelajari sebagai pengembang. Toggling digunakan untuk banyak hal, termasuk menampilkan dan menyembunyikan menu, menambah dan menghapus filter pencarian, dan tombol media sosial (suka, jempol ke atas, dll. )
Toggling tidak harus lebih rumit dari beberapa baris kode, tentu saja tergantung pada konteksnya. Hari ini kita akan mempelajari cara sederhana untuk memulai tidak hanya dengan beralih tetapi mempelajari JavaScript secara umum
Struktur HTML
Sebelum kita masuk ke hal-hal fungsional dengan JavaScript, mari siapkan beberapa elemen HTML sehingga kita memiliki sesuatu untuk berinteraksi. Mari buat pembungkus, tombol, dan kotak
Letakkan yang berikut di dalam tag tubuh dokumen HTML Anda
<div class="wrapper"> <button class="button">Toggle</button> <div class="box"></div> </div>
Elemen div induk (pembungkus) hanya ada sehingga kita dapat memusatkan elemen anaknya (kotak dan tombol) dengan CSS. Ini kosmetik, dan tidak perlu untuk bekerja
Catatan. jika Anda menggunakan editor kode online seperti CodePen, Anda dapat menambahkan kode ini di jendela tab HTML. Mereka menambahkan sisa HTML untuk Anda di belakang layar, termasuk body tag
Gaya CSS
Elemen div induk memiliki kelas .wrapper yang memiliki beberapa properti Flexbox yang menyelaraskan tengah elemen anaknya. kotak dan tombol. Saya tidak akan membahas bagaimana dan mengapa Flexbox, itu untuk tutorial lainnya
Tombol dan kotak mendapatkan beberapa kelas gaya dasar untuk keperluan kosmetik
.wrapper { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background-color: #eeeeee; } .button { display: block; text-align: center; font-size: 1.5rem; color: white; background-color: #262422; border-radius: 4px; padding: 1rem 2rem; margin-bottom: 1rem; } .bg-red { background-color: #aa2f18; }_
Hal penting yang perlu diperhatikan di sini adalah kelas .bg-red yang berisi properti CSS background-color dengan nilai '#AA2F18' (merah). Ini adalah kelas yang ingin kita alihkan (tambah atau hapus) ke elemen kotak kita saat kita mengklik elemen tombol
Penanganan Acara JavaScript
Sebelum kita dapat mulai memanipulasi elemen dengan JavaScript, pertama-tama kita harus menyimpan referensi ke dua elemen kita (kotak dan tombol). Kami melakukannya dengan mendeklarasikan dua variabel, button, dan box. Kemudian kami menetapkan dua elemen ke variabel masing-masing
Untuk memilih elemen kotak dan tombol yang ingin kita simpan referensinya, kita akan menggunakan metode querySelector yang mulia untuk mengambil kelas elemen kita
let button = document.querySelector(".button"); let box = document.querySelector(".box");
Sekarang setelah kita memiliki referensi ke setiap elemen target kita, kita dapat memanipulasi DOM, dengan mengakses properti dan metodenya. Dalam hal ini, kami ingin menggunakan pendengar acara yang mendengarkan acara klik pada elemen tombol. Setelah klik terdeteksi, kami ingin menjalankan fungsi yang menjalankan toggling warna latar belakang pada elemen kotak kami
Untuk melakukan itu, kami akan melampirkan metode addEventListener() ke elemen tombol kami (melalui referensi variabelnya). Di dalam metode pendengar acara ini kami menambahkan dua nilai parameter. .wrapper { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background-color: #eeeeee; } .button { display: block; text-align: center; font-size: 1.5rem; color: white; background-color: #262422; border-radius: 4px; padding: 1rem 2rem; margin-bottom: 1rem; } .bg-red { background-color: #aa2f18; }0 (jenis acara), dan .wrapper { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background-color: #eeeeee; } .button { display: block; text-align: center; font-size: 1.5rem; color: white; background-color: #262422; border-radius: 4px; padding: 1rem 2rem; margin-bottom: 1rem; } .bg-red { background-color: #aa2f18; }1. Kami akan menggunakan fungsi anonim (tanpa nama) dalam contoh ini
Kemudian di dalam fungsi anonim. kami melampirkan metode .wrapper { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background-color: #eeeeee; } .button { display: block; text-align: center; font-size: 1.5rem; color: white; background-color: #262422; border-radius: 4px; padding: 1rem 2rem; margin-bottom: 1rem; } .bg-red { background-color: #aa2f18; }2 properti classList JavaScript ke elemen kotak kami. Tugas metode toggle adalah menambah atau menghapus kelas .bg-red kita
button.addEventListener("click", function() { box.classList.toggle("bg-red"); });_
Metode toggle classList berfungsi seperti ini. jika kelas yang ditentukan sudah ada pada elemen target, maka akan dihapus. Jika tidak ada, maka akan ditambahkan
Dilakukan. Anda sekarang tahu cara mengaktifkan kelas pada elemen tertentu dengan JavaScript biasa. Saya memasang semua kode dari tutorial ini di CodePen