Untuk menambah "class" pada sebuah elemen, hal yang harus dilakukan pertama adalah membuat javascript mengenali elemen tersebut.

Untuk mengenali elemen tersebut, dapat menggunakan selector "class" atau selector "id" atau jenis selector yang lain.

Selector Class

Berikut adalah contoh dimana digunakan selector "class" untuk javascript dapat mengenali elemen tersebut.

var class_a = document.getElementsByClassName("a"); class_a[0].classList.add("b");

Pada contoh diatas, dipilih sebuah/sejumlah elemen dengan class "a" kemudian disimpan pada variabel class_a. Kemudian ditambahkan sebuah class dengan nama "b" pada anggota pertama array tersebut (index 0).

Jika anda ingin menambah nama class yang sama pada beberapa elemen, maka sebaiknya anda menggunakan selector class atau selector lain yang sifatnya menyimpan elemen terpilih di dalam sebuah array.

Berikut contoh penulisan baris program-nya dengan menggunakan selector class.

var class_a = document.getElementsByClassName("a"); class_a[0].classList.add("b"); class_a[1].classList.add("b"); class_a[2].classList.add("b");

Anda juga dapat menuliskan baris program tersebut dengan menggunakan perulangan for seperti pada contoh berikut.

var class_a = document.getElementsByClassName("a"); for(var i = 0; i<class_a.length; i++ ){ class_a[i].classList.add("b"); };

Keuntungan dari perulangan for adalah program kan otomatis mengetahui jumlah elemen yang terpilih dan menambahkan class yang sama pada semua elemen tersebut.

Selector Id

Berikut adalah contoh dimana digunakan selector "id" untuk javascript dapat mengenali elemen tersebut.

var id_a = document.getElementById("a"); id_a.classList.add("b");

Pada contoh diatas, dipilih sebuah elemen dengan id "a" kemudian disimpan pada variabel id_a. Kemudian ditambahkan sebuah class dengan nama "b" pada elemen tersebut.

Tambahan

Perlu diperhatikan bahwa jika nama "class" yang ditambahkan sudah ada sebelumnya maka nama class yang baru tidak akan ditambahkan.

Jika nama "class" yang ditambahkan terdiri dari beberapa, maka dapat dituliskan seperti pada contoh berikut.

var id_a = document.getElementById("a"); id_a.classList.add("b", "c");

Pada contoh diatas, elemen terpilih ditambahkan beberapa class, yaitu class dengan nama "b" dan "c".

Lihat juga dan .

Sekian, Semoga bermanfaat