Add Css Javascript Class

MUAZHAN

3 min read

·

Jun 22, 2024

24

Share

Menambahkan Class CSS dan Javascript

Dalam pengembangan web, menambahkan class CSS dan Javascript ke elemen HTML adalah teknik yang umum digunakan untuk mengontrol gaya dan perilaku elemen tersebut.

Menambahkan Class CSS

1. Menambahkan Class Dalam HTML: Anda dapat menambahkan class ke elemen HTML dengan menggunakan atribut class. Contohnya:

   Ini adalah paragraf dengan class "paragraf-utama".
   

2. Menerapkan Gaya dengan CSS: Anda dapat mendefinisikan gaya untuk class yang telah Anda tambahkan di dalam file CSS. Contohnya:

   .paragraf-utama {
       font-size: 20px;
       font-weight: bold;
       color: blue;
   }
   

   Kode di atas akan menerapkan gaya yang telah didefinisikan (ukuran font 20px, tebal, warna biru) ke semua elemen yang memiliki class "paragraf-utama".

Menambahkan Class Javascript

1. Menambahkan Class Menggunakan Javascript: Anda dapat menambahkan class ke elemen HTML dengan menggunakan Javascript. Berikut contoh menggunakan metode classList.add():

   const paragraf = document.querySelector('.paragraf-utama');
   paragraf.classList.add('paragraf-baru');
   

   Kode di atas akan menambahkan class "paragraf-baru" ke elemen yang memiliki class "paragraf-utama".

2. Menghilangkan Class Menggunakan Javascript: Anda dapat menghilangkan class dari elemen HTML menggunakan metode classList.remove():

   const paragraf = document.querySelector('.paragraf-utama');
   paragraf.classList.remove('paragraf-baru');
   

   Kode di atas akan menghilangkan class "paragraf-baru" dari elemen yang memiliki class "paragraf-utama".

Keuntungan Menggunakan Class

• Organisasi dan modularitas: Class memungkinkan Anda untuk mengelompokkan gaya dan perilaku yang terkait dengan elemen tertentu, yang meningkatkan organisasi dan modularitas kode Anda.
• Kemudahan penyesuaian: Anda dapat dengan mudah mengubah gaya atau perilaku elemen dengan mengubah class yang diterapkan, tanpa harus mengubah kode HTML.
• Reusabilitas: Class dapat digunakan kembali di seluruh halaman web atau bahkan di berbagai proyek, yang menghemat waktu dan usaha.

Kesimpulan

Menambahkan class CSS dan Javascript adalah teknik penting dalam pengembangan web. Teknik ini memberikan kontrol yang lebih baik atas gaya dan perilaku elemen HTML, meningkatkan organisasi, modularitas, dan reusabilitas kode.