Sebelumnya kita telah membahas Cara Menambahkan Class Menggunakan Javascript dan Cara Menghapus Class Menggunakan Javascript. Elemen classList mempunyai beberapa metode yaitu metode add(), remove(), toggle(), dan lain-lain. pada tutorial kali ini saya akan membahas bagaimana Cara Menambah dan Menghapus Class Menggunakan Javascript, di sini saya masih menggunakan elemen classList tapi dengan metode berbeda yaitu metode toggle() untuk menambah dan menghapus class ada elemen paragraf.
Tidak usah panjang lebar saya akan mencoba membagi Cara Menambah dan Menghapus Class Menggunakan Javascript, kasus yg saya ambil adalah menambahkan dan menghapus class pada elemen paragraf. Berikut langkah-langkahnya:
– Pertama teman-teman buka text editor teman-teman dan ketikan kode html di bawah ini:
!DOCTYPE html>
<html>
<head>
<title>addClass</title>
<style type="text/css">
<!-- efek class hide yang akan kita tambahkan pada elemen paragraf -->
.hide {
visibility: hidden;
}
</style>
</head>
<body>
<!--elemen yang akan kita tambahkan-->
<p class="contoh">Elemen yang memiliki class "contoh" dan akan di tambah class hide</p>
<button id="btn">Click!</button><!--untuk memproses javascriptnya-->
</body>
</html>
Keterangan sudah berada dalam commenting di tag html di atas. Coba teman-teman jalankan di browser teman-teman, maka akan tampil seperti gambar di bawah ini:
– Kedua, teman-teman tuliskan kode javascript di bawah tag button, dan berikut kodenya:
<script>
var element = document.getElementById("btn");
var paragraf = document.querySelectorAll(".contoh");
element.onclick = function(){
paragraf[0].classList.toggle("hide");
}
</script>
Penjelasan kode javascript di atas:
– variabel element: berfungsi untuk mengambil id dari button untuk proses onclick.
– variabel paragraf : untuk menyeleksi semua class .contoh yang berada di elemen p
– paragraf[0].classList.toggle(“hide”): berfungsi untuk memilih paragraf mana yang akan kita tambahkan class hide. karena kita hanya memiliki satu elemen maka elemen 0 atau paragraf ke-dua lah yang akan kita tambahkan class.
setelah selesai mengetikan kode javascript di atas, coba teman-teman refresh file html yang ada di browser tadi lalu klik buttonnya, maka elemen 0 atau paragraf akan terkena efek dari class hide yaitu paragrafnya di sembunyikan:
Kalau teman-teman klik lagi buttonya maka class hide akan di hapus dan paragraf akan tampil kembali.
Bagaimana teman-teman cukup mudahkan Menambah dan Menghapus Class Menggunakan Javascript. Dengan java script kita bisa dengan mudah menambahkan dan menghapus class pada elemen yang kita inginkan.
Sekian tutorial kali ini tentang Cara Menambah dan Menghapus Class Menggunakan Javascript. Selamat mencoba teman-teman.