3 Contoh Penggunaan Properti classList DOM pada HTML

Properti classList DOM pada HTML adalah properti yang bersifat read-only. Properti ini menggunakan properti "classList.length" yang mengembalikan nama class dari elemen pada form DOMTokenlist(sekumpulan ruang yang dipisahkan oleh token-token). Properti ini digunakan untuk penambahan, penghapusan, dan toggle CSS classes pada elemen html.

Catatan: properti classList tidak didukung penggunaannya pada IE9, dan versi sebelumnya.

Sintak:
const elementClasses = elementNodeReference.classList;

Method:
  • add(class1, class2, …): menambahkan satu buah class pada elemen. Jika class-nya sudah ada pada atribut elemen class, maka penambahan tersebut akan diabaikan.
  • remove(class1, class2, …): menghapus class spesifik pada elemen. Dimana class yang tidak terdapat pada elemen akan dihilangkan tidak dianggap sebagai error.
  • contains(class): berfungsi untuk memeriksa apakah value class spesifik sudah atau atau belum pada suatu elemen atribut class, yang akan mengembalikan hasil berupa nilai Boolean TRUE atau FALSE.
  • item(index): berfungsi untuk mengembalikan nilai class berdasarkan nilai indeks dalam koleksi class. Jika nilai indeks yang diberikan berada diluar jangkauan nilai, maka akan mengembalikan nilai null.
  • toggle(class, force): Toggle diantara nama class untuk suatu elemen.

Parameter pertama menghapus class spesifik dari elemen dan akan mengembalikan nilai FALSE. Jika nilai class tersebut tidak ada, maka akan dilakukan penambahan class ke elemen, dan akan mengembalikan nilai TRUE.

Parameter opsional kedua adalah sebuah nilai Boolean yang akan memaksa class untuk ditambahkan atau dihapus pada elemen. Ketika sebuah parameter kedua ditampilkan dan dievaluasi untuk bernilai TRUE, maka akan ditambahkan value class spesifik, jika tidak maka akan dievaluasi sebagai nilai FALSE, yang akan memaksa untuk dilakukan penghapusan class spesifik meskipun class tersebut sudah tersedia ataupun tidak.

Contoh: Penambahan dan penghapusan sebuah class.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti classList DOM HTML

</title>

 

<style>

.mystyle 

{

align: center;

border: 1px solid black;

height: 100px;

padding-top: 35px;

background: lightgreen;

color: Black;

font-size: 70px;

}

</style>

</head>

 

<body>

 

<p>

Klik tombol untuk melihat

penambahan dan penghapusan

class "mystyle" DIV.

</p>

 

<button onclick="myFunction()">

Add class

</button>

 

<div id="myDIV">

Blog Elfan

</div>

 

<script>

function myFunction() 

{

document.getElementById(

"myDIV").classList.add("mystyle");

}

 

function Remove() 

{

document.getElementById(

"myDIV").classList.remove("mystyle");

}

</script>

 

<button onclick="Remove()">

Remove class

</button>

 

</body>

 

</html>

Output:

Klik tombol untuk melihat penambahan dan penghapusan class "mystyle" DIV.

Blog Elfan


Contoh: Toggling diantara class.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti classList DOM HTML

</title>

 

<style>

.mystyle 

{

align: center;

border: 1px solid black;

height: 100px;

padding-top: 35px;

background: lightgreen;

color: Black;

font-size: 70px;}

 

.newClassName 

{

align: center;

border: 1px solid black;

height: 50px;

padding-top: 35px;

background: green;

color: white;

font-size: 50px;}

</style>

</head>

 

<body>

 

<p>

Klik tombol untuk melihat 

penambahan dan pengurangan 

class "mystyle" DIV.

</p>

 

<button onclick="myFunction()">

toggle

</button>

 

<div 

id="myDIV" 

class="mystyle">

Blog Elfan

</div>

 

<script>

function myFunction() 

{

document.getElementById(

"myDIV").classList.toggle("newClassName");

}

</script>

 

</body>

 

</html>

Output:

Klik tombol untuk melihat penambahan dan pengurangan class "mystyle" DIV.

Blog Elfan


Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti classList DOM HTML

</title>

 

<style>

.mystyle 

{

width: 500px;

height: 50px;}

 

.anotherClass 

{

background-color: lightGreen;}

 

.thirdClass 

{

text-align: center;

font-size: 25px;

color: black;

margin-bottom: 10px;}

</style>

</head>

 

<body>

 

<div 

id="myDIV" 

class="mystyle anotherClass thirdClass">

Blog Elfan

</div>

 

<button 

onclick="myFunction()">

Klik untuk menghitung class

</button>

 

<p id="demo"></p>

 

<script>

function myFunction() 

{

var x = document.getElementById(

"myDIV").classList.length;

document.getElementById("demo").innerHTML = x;

}

</script>

 

</body>

 

</html>

Output:
Blog Elfan

Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah jenis browser yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML:
      1. Google Chrome 8.0
      2. Internet Explorer 10.0
      3. Firefox 3.6
      4. Opera 11.5
      5. Safari 5.1

      Hapus
  2. Apa yang dimaksud dengan properti classList DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti classList DOM pada HTML berfungsi untuk mengembalikan nama kelas CSS dari suatu elemen tertentu. Properti classList mengembalikan object DOMTokenList. Properti classList bersifat read-only, tetapi dapat dilakukan penambahan atau penghapusan class CSS dengan menggunakan method add() atau remove().

      Hapus
    2. classList merupakan properti read-only yang berfungsi untuk mengembalikan koleksi DOMTokenList secara langsung dari atribut class elemen. Properti classList kemudian dapat digunakan untuk memanipulasi daftar class. Penggunaan properti classList merupakan bentuk alternatif yang mudah untuk mengakses daftar class elemen sebagai string yang dibatasi spasi melalui elemen.

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C