Cara Menggunakan Property classList JavaScript

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan property classList JavaScript. Perlu teman-teman ketahui sebelumnya, classList adalah salah satu property JavaScript yang berfungsi untuk mengembalikan nama class sebagai object DOM. Selain itu Properti tersebut berguna untuk menambah, menghapus, dan mengaktifkan attribute class pada suatu elemen.

Seperti pada contoh struktur kode html yang saya berikan dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Method classList JavaScript</title>
</head>
<style>
	.active{
		background: red;
	}
</style>
<body>
	<div id="kotak">Cara Menggunakan Property classList JavaScript</div>
	<input type="submit" value="Klik Disini" onclick="fungsisaya()">
</body>
</html>

Seperti pada contoh struktur kode html diatas, dimana saya ingin menambahkan attribute class active didalam element yg memiliki attribute id kotak. Dan kalian bisa tuliskan kode JavaScript seperti dibawah ini :

<script>
 function fungsisaya() {
   document.getElementById("kotak").classList.add("active");
 }
</script>

Sehingga struktur kode yang berada file html akan seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Method classList JavaScript</title>
</head>
<style>
	.active{
		background: red;
	}
</style>
<body>
	<div id="kotak">Cara Menggunakan Property classList JavaScript</div>
	<input type="submit" value="Klik Disini" onclick="fungsisaya()">
</body>
<script>
	function fungsisaya() {
		document.getElementById("kotak").classList.add("active");
	}
</script>
</html>

Sampai disini penjelasan saya mengenai cara menggunakan property classList JavaScript, semoga bermanfaat.