Cara Menambahkan Class Menggunakan Javascript
Javascript ialah bahasa pemrograman tingkat tinggi dan dinamis. Javascript populer di internet dan dapat bekerja di beberapa besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan pada halaman web menggunakan tag SCRIPT. Di panduan kali ini saya akan membahas mengenai Cara Menambahkan Class Menggunakan Javascript.
Di javascript kita mengenal unsur classList yang mempunyai cara add() bagi menambahkan class di suatu unsur di pada html. Di pada kasus yang saya akan bahas kali ini saya akan mencoba salah satu cara yang terdapat di classList yaitu cara add(). Berikut ialah strategi Cara Menambahkan Class Menggunakan Javascript:
– 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>
.aqua {
background: aqua;
}
</style>
</head>
<body>
<p class=contoh aqua>Unsur dengan class contoh dan aqua</p><!--Unsur yang telah di beri dua class-->
<p class=contoh>Unsur yang mempunyai class contoh saja</p><!--Unsur yang akan di tambahkan class aqua-->
<button id=btn>Tambahkan class aqua</button><!--Bagi memproses kode javascript-->
</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[1].classList.add(aqua);
}
</script>
Penjelasan kode javascript di atas:
– variabel element: berfungsi bagi mengambil id dari button bagi proses onclick.
– variabel paragraf : bagi menyeleksi seluruh class .contoh yang berada di unsur p
– paragraf[1].classList.add(“aqua”): berfungsi bagi memilih paragraf mana yang akan kita tambahkan class aqua. karena kita hanya mempunyai dua unsur karenanya unsur 1 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 1 atau paragraf ke dua akan terkena efek dari class aqua:
Bagaimana teman-teman lumayan mudahkan Menambahkan Class Menggunakan Javascript. Dengan java script kita dapat dengan gampang menambahkan class di unsur yang kita inginkan.
Demikian panduan kali ini mengenai Cara Menambahkan Class Menggunakan Javascript. Selamat mencoba teman-teman.
Sumber https://kursuswebsite.org
