Cara Menggunakan Property className JavaScript

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan property className JavaScript. Perlu teman-teman ketahui sebelumnya, className adalah salah satu property javascript yang berfungsi untuk menetapkan atau menentukan suatu nilai dari attribute class element. Seperti pada contoh disini saya memiliki struktur dokumen html seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cara menggunakan property className JavaScript</title>
</head>
<body>
	<div>Ini adalah contoh element tanpa attribute class</div>
	<button>Add Class</button>
</body>
</html>

Seperti yang kalian lihat dari struktur kode html diatas, dimana saya memiliki satu element <div> yang tidak memiliki attribute apapun, dan pada contoh disini saya akan menambahkan atau menetapkan attribute class beserta dengan nama nilai dari attribute tersebut dari event onclick button yang ada di struktur kode html tersebut. Dan untuk kode JavaScriptnya adalah seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>cara menggunakan property className JavaScript</title>
</head>
<style>
	.active{
		background: red;
	}
</style>
<body>
	<div>Ini adalah contoh element tanpa attribute class</div>
	<button onclick="fungsiSaya()">Add Class</button>
</body>
<script>
function fungsiSaya() {
  document.getElementsByTagName("div")[0].className = "active";
}
</script>
</html>

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