Add Custom Css Via Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

29

Share

Menambahkan CSS Kustom Menggunakan JavaScript

JavaScript memungkinkan kita untuk memanipulasi dan mengubah style elemen HTML secara dinamis. Salah satu caranya adalah dengan menambahkan CSS kustom melalui JavaScript. Metode ini berguna untuk mengatur tampilan halaman secara real-time, berdasarkan aksi pengguna atau kondisi tertentu.

Cara Menambahkan CSS Kustom melalui JavaScript

Ada dua cara utama untuk menambahkan CSS kustom melalui JavaScript:

1. Menggunakan style attribute:

• Kita dapat menambahkan style secara langsung ke elemen HTML menggunakan atribut style.

const myElement = document.getElementById('myElement');
myElement.style.color = 'red';
myElement.style.fontSize = '24px';

• Kode ini akan mengubah warna teks elemen dengan id myElement menjadi merah dan ukuran font menjadi 24px.

2. Menggunakan createElement dan appendChild:

• Kita dapat membuat elemen style baru dan menambahkannya ke dalam head dokumen HTML.

const styleElement = document.createElement('style');
const styleContent = `
  #myElement {
    color: blue;
    font-size: 18px;
  }
`;
styleElement.appendChild(document.createTextNode(styleContent));
document.head.appendChild(styleElement);

• Kode ini akan menambahkan aturan CSS baru yang menargetkan elemen dengan id myElement, mengubah warna teks menjadi biru dan ukuran font menjadi 18px.

Keuntungan dan Kerugian

Keuntungan:

• Fleksibel: Memungkinkan kita untuk mengubah style secara real-time berdasarkan kondisi atau aksi pengguna.
• Dinamis: Style dapat diubah tanpa harus memuat ulang halaman.
• Mudah diimplementasikan: Prosesnya relatif sederhana.

Kerugian:

• Kode yang rumit: Dapat membuat kode JavaScript lebih kompleks, terutama jika banyak style yang perlu ditambahkan.
• Sulit untuk debugging: Menemukan kesalahan pada style yang ditambahkan melalui JavaScript bisa lebih sulit.
• Kinerja: Menambahkan style secara dinamis bisa berdampak negatif pada kinerja, terutama jika dilakukan terlalu sering.

Tips

• Gunakan metode createElement dan appendChild untuk menambahkan CSS kustom secara terstruktur.
• Simpan aturan CSS di dalam variabel agar mudah dikelola dan diubah.
• Gunakan fungsi addEventListener untuk memicu perubahan style berdasarkan aksi pengguna.

Kesimpulan

Menambahkan CSS kustom melalui JavaScript memberikan kontrol yang lebih besar terhadap style halaman dan memungkinkan kita untuk membuat tampilan yang lebih dinamis dan interaktif. Namun, perlu diingat untuk menggunakan metode ini dengan bijak agar tidak berdampak negatif pada kinerja dan kerumitan kode.