W3schools Javascript Toggle Class

W3schools Javascript Toggle Class

3 min read Jun 18, 2024
W3schools Javascript Toggle Class

W3Schools JavaScript Toggle Class: Mengubah Style Elemen dengan Mudah

W3Schools adalah sumber daya online yang sangat populer untuk mempelajari bahasa pemrograman, termasuk JavaScript. Salah satu topik yang dibahas di W3Schools adalah JavaScript Toggle Class. Metode ini sangat berguna untuk mengubah tampilan elemen HTML dengan cepat dan mudah.

Apa Itu Toggle Class?

Toggle Class adalah sebuah metode dalam JavaScript yang memungkinkan Anda untuk menambahkan atau menghapus class CSS pada elemen HTML secara bergantian.

Cara Kerja Toggle Class

  1. Identifikasi Elemen: Anda perlu memilih elemen HTML yang ingin Anda ubah tampilannya.
  2. Tentukan Class: Tentukan class CSS yang akan ditambahkan atau dihapus dari elemen tersebut.
  3. Gunakan classList.toggle(): JavaScript memiliki metode classList.toggle() yang digunakan untuk menambahkan atau menghapus class. Jika class sudah ada, metode ini akan menghapusnya. Jika class tidak ada, metode ini akan menambahkannya.

Contoh: Mengubah Warna Teks








This is a paragraph.

Kode di atas akan menambahkan class red ke paragraf ketika tombol "Change Text Color" ditekan. Jika class red sudah ada, tombol tersebut akan menghapus class red dan mengembalikan warna teks ke default.

Keuntungan Menggunakan Toggle Class

  • Mudah digunakan: Kode JavaScript-nya sederhana dan mudah dipahami.
  • Efisien: Metode ini hanya mengubah class yang diperlukan, tidak perlu menulis ulang seluruh style.
  • Fleksibel: Dapat digunakan untuk mengontrol berbagai aspek tampilan elemen, seperti warna, ukuran, dan posisi.

Kesimpulan

Toggle Class adalah teknik yang powerful dan mudah digunakan untuk mengontrol tampilan elemen HTML dengan JavaScript. W3Schools menyediakan banyak contoh dan penjelasan tentang metode ini, sehingga Anda dapat mempelajarinya dengan cepat dan mudah.

Related Post