Menambahkan dan Menghapus Attribut Class Pada Tag HTML dengan JavaScript

Menambahkan dan Menghapus Class Pada Tag HTML dengan JavaScript - Pada tag HTML memungkinkan kita untuk memberikan style pada tag tersebut dengan menambahkan attribut Class.

Untuk menambahkan attribut Class pada tag HTML dapat dilakukan secara manual yakni dengan cara menuliskan langsung pada tag HTML yang diinginkan. Akan tetapi proses pemberian attribut class tidak dapat dilakukan ketika file HTML sudah dijalankan. Untuk mengatasi permasalahan tersebut sobat dapat melakukannya dengan cara salah satunya adalah dengan penggunaan kode JavaScript

Dengan menggunakan kode JavaScript kita dapat memanipulasi attribut Class pada tag HTML seperti menambah dan menghapus class. Untuk lebih jelasnya silahkan simak contoh di bawah ini.

Misalnya kita mempunya tag HTML sebagai berikut:

<div class="kotak"></div>

Pada tag div di atas memiliki class dengan nama kotak. Kemudian kita akan memberikan style pada tag div tersebut dengan cara membuat kode CSS nya.

.kotak{
    background: #000000;
    width: 150px;
    height: 35px;
    cursor: pointer;
}

Menambahkan Attribut Class

Jika kita ingin menambahkan class yang lain pada tag div tersebut kita dapat menggunakan kode JavaScript di bawah ini. Misalnya kita akan menambahkan class dengan nama active

<script>
    let kotak = document.querySelector('.kotak');

    kotak.onclick = function () {
        kotak.classList.add('active');
    }
</script>

Maka tag div dengan class kotak ketika diklik akan mendapat tambahan class baru dengan nama active sehingga tag div sekarang memiliki 2 class sekaligus.

<div class="kotak active"></div>

Menghapus Attribut Class

Adapun jika sobat ingin menghapus class active pada tag div silahkan ganti kode add menjadi remove pada kode JavaScript di atas.

<script>
    let kotak = document.querySelector('.kotak');

    kotak.onclick = function () {
        kotak.classList.remove('active');
    }
</script>

Download dan Demo Source Code Program

Untuk dapat memahami lebih jelas sobat dapat melihat contoh kasus dari penggunaan manipulasi attribut class pada tag html seperti menambahkan dan menghapus nama class di bawah ini.

Semoga tutorial kali ini bermanfaat. Dan jangan lupa share ke teman sobat yang lainnya agar sama-sama dapat merasakan manfaatnya. Dan seperti biasanya jika ada pertanyaan mengenai postingan di atas silahkan sobat tanyakan pada kolom komentar.