Menambahkan, Menghapus, dan Memanipulasi Class dengan jQuery

jQuery menyediakan beberapa metode seperti addClass(), removeClass(), toggleClass(), dll untuk memanipulasi CSS Class yang ditugaskan ke elemen HTML.


Metode addClass()

Metode addClass() berfungsi untuk menambahkan satu atau beberapa class ke dalam elemen yang dipilih.

Contoh berikut berfungsi untuk menambahkan class .header-halaman ke dalam elemen <h1> dan class .highlight ke dalam elemen <p> yang memiliki class .hint ketika tombol di klik:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial jQuery | EL Creative Academy</title>

    <style>
        .header-halaman {
            color: red;
            text-transform: uppercase;
        }
        .highlight {
            background: yellow;
        }      
    </style>
</head>
<body>

    <h1>Teks Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint"><strong>Tips:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Tambah Class</button>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1").addClass("header-halaman");
                $("p.hint").addClass("highlight");
            });
        });
    </script>
</body>
</html>

Lihat kode di Github | Lihat Live Demo

Kalian juga bisa menambahkan beberapa class ke dalam elemen sekaligus dengan cara menentukan daftar class yang dipisahkan SPASI di dalam metode addClass(), contoh:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1").addClass("header-halaman highlight");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode removeClass()

Kalian juga bisa menghapus class dari suatu elemen dengan menggunakan metode removeClass(). Metode removeClass() dapat menghapus satu, beberapa, atau semua class sekaligus dari elemen yang dipilih.

Contoh berikut berfungsi untuk menghapus class .header-halaman dari elemen <h1> dan class .hint dan .highlight dari elemen <p> ketika tombol di klik:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1").removeClass("header-halaman highlight");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Ketika metode removeClass() dipanggil tanpa memiliki argumen, metode tersebut akan menghapus semua class dari elemen yang dipilih. Contoh:

<script>
     $(document).ready(function(){
         $("button").click(function(){
             $("h1").removeClass();
         });
     });
</script>

Lihat kode di Github | Lihat Live Demo

Metode toggleClass()

ToggleClass() berfungsi untuk menambahkan atau menghapus satu atau beberapa class dari elemen yang dipilih sehingga jika elemen yang dipilih tersebut sudah memiliki suatu class, maka class tersebut akan dihapus; jika elemen tersebut tidak memiliki class, maka elemen tersebut akan memiliki class:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial jQuery | EL Creative Academy</title>

    <style>
        .header-halaman {
            color: red;
            text-transform: uppercase;
        }
        .highlight {
            background: yellow;
        }      
    </style>
</head>
<body>

    <h1 class="header-halaman highlight">Teks Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint"><strong>Tips:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Tambah Class</button>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("h1").toggleClass("header-halaman highlight");
            });
        });
    </script>
</body>
</html>

Lihat kode di Github | Lihat Live Demo

Pada bagian selanjutnya, kalian akan mempelajari Cara Memanipulasi Properti CSS dengan menggunakan jQuery. Jadi tetap pantau serial ini yaa.

2 Komentar

  1. Min, bikinin artikel cara bikin accordion menu kaya gini untuk di dalam artikel blogger blogspot dong, terimakasih

    https://uploads.disquscdn.com/images/4ff3abc41caf5f6e9341ba77f776343fd8a3eedf56833b9842657d3448113aa0.jpg

    BalasHapus

Posting Komentar