Cara Menambahkan Class Menggunakan Javascript

Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. Javascript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. Pada tutorial kali ini saya akan membahas tentang Cara Menambahkan Class Menggunakan Javascript.

Pada javascript kita mengenal elemen classList yang mempunyai metode add() untuk menambahkan class pada suatu elemen di dalam html. Di dalam kasus yang saya akan bahas kali ini saya akan mencoba salah  satu metode yang ada di classList yaitu metode add(). Berikut adalah langkah-langkah Cara Menambahkan Class Menggunakan Javascript:

– 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">
.aqua {
  background: aqua;
}
</style>
</head>
<body>

<p class="contoh aqua">Elemen dengan class "contoh dan aqua"</p><!--Elemen yang sudah di beri dua class-->
<p class="contoh">Elemen yang memiliki class "contoh" saja</p><!--Elemen yang akan di tambahkan class aqua-->

<button id="btn">Tambahkan class aqua</button><!--Untuk memproses kode javascript-->


</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[1].classList.add("aqua");
}
</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[1].classList.add(“aqua”): berfungsi untuk memilih paragraf mana yang akan kita tambahkan class aqua. karena kita hanya memiliki dua elemen maka elemen 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 ada di browser tadi lalu klik buttonnya, maka elemen 1 atau paragraf ke dua akan terkena efek dari class aqua:

Bagaimana teman-teman cukup mudahkan Menambahkan Class Menggunakan Javascript. Dengan java script kita bisa dengan mudah menambahkan class pada elemen yang kita inginkan.

Sekian tutorial kali ini tentang Cara Menambahkan Class Menggunakan Javascript. Selamat mencoba teman-teman.