Untuk menambahkan dan menghilangkan beberapa class pada sebuah HTML element dengan menggunakan javaScript, kita cukup menggunakan metode classList.add()
dan classList.remove()
seperti biasa. Metode add()
dan remove()
di sini dapat menerima satu atau lebih parameter dalam hal ini nama class.
Add and Remove Single class
Berikut ini contoh menambahkan dan menghilangkan satu class pada HTML element:
Add Single class
Diasumsikan kita akan menambahkan class .bg-red
pada element dengan id #aho
document.getElementById('aho').classList.add('bg-red');
Remove Single class
Diasumsikan kita akan menghilangkan class .bg-red
dari element dengan id #aho
document.getElementById('aho').classList.remove('bg-red');
CodePen
Add and Remove Multiple classes
Berikut ini contoh menambahkan dan menghilangkan beberapa class pada HTML element:
Add Multiple classes
Diasumsikan kita akan menambahkan class .txt-red
dan .bg-blue
pada element dengan id #aho
document.getElementById('aho').classList.add('txt-red', 'bg-blue');
Remove Multiple classes
Diasumsikan kita akan menghilangkan class .txt-red
dan .bg-blue
dari element dengan id #aho
document.getElementById('aho').classList.remove('txt-red', 'bg-blue');
CodePen
Adding and Removing classes in Multiple elements
Untuk menambahkan dan menghilangkan beberapa class di beberapa HTML element kita dapat melakukannya dengan looping atau iterasi pada setiap element.
Contoh HTML code
<div id="demo">
<div class="aho">coba 1</div>
<div class="aho">coba 2</div>
<div class="aho">coba 3</div>
<div>
<button onClick="add()">add</button>
<button onClick="remove()">remove</button>
</div>
</div>
Contoh CSS code
.txt-red {
color: crimson;
}
.bg-blue {
background-color: cornflowerblue;
}
Contoh JS code
Pada contoh berikut, kita menggunakan metode document.querySelectorAll
untuk memilih semua element di DOM yang memiliki class .aho
, kemudian kita menggunakan array.forEach
untuk melakukan iterasi dari setiap element.
const aho = document.querySelectorAll('.aho');
function add() {
aho.forEach((elm) => {
elm.classList.add('txt-red', 'bg-blue');
})
}
function remove() {
aho.forEach((elm) => {
elm.classList.remove('txt-red', 'bg-blue');
})
}
Selain menggunakan array.forEach
seperti pada contoh di atas, kita juga dapat menggunakan metode looping yang lainnya seperti for
loop atau for...of
.
Dengan Metode for
const aho = document.querySelectorAll('.aho');
function add() {
for (let index = 0; index < aho.length; index++) {
const elm = aho[index];
elm.classList.add('txt-red', 'bg-blue');
}
}
Dengan Metode for...of
const aho = document.querySelectorAll('.aho');
function add() {
for (const elm of aho) {
elm.classList.add('txt-red', 'bg-blue');
}
}
CodePen
Conclusion
Dengan metode classList.add()
dan classList.remove()
kita dapat menambahkan atau menghilangkan satu atau lebih class. Akan tetapi metode ini akan mengasilkan error apabila parameter berupa string kosong atau string yang mengandung spasi.
Top comments (0)