Cara Menambah dan Menghapus Class Menggunakan Javascript
Sebelumnya kita telah membahas Cara Menambahkan Class Menggunakan Javascript dan Cara Menghapus Class Menggunakan Javascript. Unsur classList mempunyai beberapa sistem yaitu sistem add(), remove(), toggle(), dan lain-lain. di panduan kali ini saya akan membahas bagaimana Cara Menambah dan Menghapus Class Menggunakan Javascript, di sini saya masih menggunakan unsur classList tapi dengan sistem berbeda yaitu sistem toggle() bagi menambah dan menghapus class ada unsur paragraf.
Tak usah panjang lebar saya akan mencoba membagi Cara Menambah dan Menghapus Class Menggunakan Javascript, kasus yg saya ambil yakni menambahkan dan menghapus class di unsur paragraf. Berikut langkah-langkahnya:
– Pertama-tama 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 di unsur paragraf -->
.hide {
visibility: hidden;
}
</style>
</head>
<body>
<!--elemen yang akan kita tambahkan-->
<p class=contoh>Unsur yang mempunyai class contoh dan akan di tambah class hide</p>
<button id=btn>Click!</button><!--untuk memproses javascriptnya-->
</body>
</html>
Keterangan telah berada pada commenting di tag html di atas. Coba teman-teman jalankan di browser teman-teman, karenanya 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 bagi mengambil id dari button bagi proses onclick.
– variabel paragraf : bagi menyeleksi segala class .contoh yang berada di unsur p
– paragraf[0].classList.toggle(“hide”): berfungsi bagi memilih paragraf mana yang akan kita tambahkan class hide. karena kita hanya mempunyai satu unsur karenanya unsur 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 terdapat di browser tadi lalu klik buttonnya, karenanya unsur 0 atau paragraf akan terkena efek dari class hide yaitu paragrafnya di sembunyikan:
Kalau teman-teman klik lagi buttonya karenanya class hide akan di hapus dan paragraf akan tampil kembali.
Bagaimana teman-teman lumayan mudahkan Menambah dan Menghapus Class Menggunakan Javascript. Dengan java script kita dapat dengan gampang menambahkan dan menghapus class di unsur yang kita inginkan.
Sekianlah panduan kali ini mengenai Cara Menambah dan Menghapus Class Menggunakan Javascript. Selamat mencoba teman-teman.
Sumber https://kursuswebsite.org
