Cara menggunakan CLASWS pada 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 propertyclassName 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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>caramenggunakan propertyclassNameJavaScript</title>

</head>

<style>

.active{

background:red;

}

</style>

<body>

<div>Ini adalah contoh element tanpa attribute class</div>

<button onclick="fungsiSaya()">AddClass</button>

</body>

<script>

functionfungsiSaya(){

  document.getElementsByTagName("div")[0].className="active";

}

</script>

</html>

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

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>CaraMenggunakan MethodclassListJavaScript</title>

</head>

<style>

.active{

background:red;

}

</style>

<body>

<div id="kotak">Cara Menggunakan PropertyclassList 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>

functionfungsisaya(){

   document.getElementById("kotak").classList.add("active");

}

</script>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CaraMenggunakan MethodclassListJavaScript</title>

</head>

<style>

.active{

background:red;

}

</style>

<body>

<div id="kotak">Cara Menggunakan PropertyclassList JavaScript</div>

<input type="submit"value="Klik Disini" onclick="fungsisaya()">

</body>

<script>

functionfungsisaya(){

document.getElementById("kotak").classList.add("active");

}

</script>

</html>

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

Apa itu class di JavaScript?

Class adalah template untuk membuat object. Satu class mempunyai satu atau lebih properti atau fungsi. Satu class dapat menghasilkan banyak object. Semua object mempunyai properti dan fungsi yang sama.

Apa Itu this di JavaScript?

Keyword this adalah object pemilik suatu baris code yang sedang dieksekusi.

Apa itu Instance di JavaScript?

Instance merupakan objek yang mempunyai properti dan method yang sudah ditentukan oleh blueprint-nya (class), atau ringkasnya ialah objek yang merupakan hasil realisasi dari sebuah blueprint. Sama seperti constructor function, untuk membuat instance dari class pada ES6 kita pakai keyword new.

Apa saja objek JavaScript?

Objek JavaScript adalah entitas yang independen di mana ia memiliki metode dan properti. Nilai properti dapat berupa fungsi, dalam hal ini properti tersebut dikenal sebagai metode. dalam JavaScript Anda tidakd apat mendeklarasikan angka, string, dan boolean sebagai objek.