Add Style Javascript To Element

MUAZHAN

3 min read

·

Jun 22, 2024

31

Share

Menambahkan Style ke Elemen dengan JavaScript

JavaScript memberikan fleksibilitas untuk memanipulasi tampilan elemen HTML secara dinamis. Berikut adalah beberapa cara untuk menambahkan style ke elemen dengan JavaScript:

1. Menggunakan style Attribute

Cara paling sederhana adalah dengan menggunakan style attribute langsung pada elemen. Anda dapat menetapkan properti CSS dengan menggunakan syntax camelCase.

const myElement = document.getElementById('my-element');
myElement.style.backgroundColor = 'red';
myElement.style.fontSize = '24px';
myElement.style.fontWeight = 'bold';

Kode di atas akan mengubah latar belakang my-element menjadi merah, ukuran font menjadi 24px, dan font menjadi bold.

2. Menggunakan classList

classList memberikan kontrol yang lebih terstruktur untuk menambahkan dan menghapus kelas CSS.

const myElement = document.getElementById('my-element');
myElement.classList.add('my-class');

Jika Anda memiliki file CSS dengan kelas my-class yang telah didefinisikan, kode di atas akan menambahkan kelas tersebut ke my-element.

3. Menggunakan setAttribute

setAttribute dapat digunakan untuk menambahkan atribut apa pun ke elemen, termasuk style.

const myElement = document.getElementById('my-element');
myElement.setAttribute('style', 'background-color: blue; font-size: 18px;');

Kode di atas akan mengubah latar belakang my-element menjadi biru dan ukuran font menjadi 18px.

4. Menggunakan Element.style Object

Anda dapat mengakses objek style dari elemen dan menetapkan properti CSS secara langsung.

const myElement = document.getElementById('my-element');
myElement.style.backgroundColor = 'green';
myElement.style.fontSize = '16px';

Keuntungan dan Kekurangan Setiap Metode

Metode style Attribute:

• Keuntungan: Sederhana dan mudah digunakan.
• Kekurangan: Kode bisa menjadi tidak terstruktur dan sulit dimaintain jika banyak style yang digunakan.

Metode classList:

• Keuntungan: Memberikan kontrol yang lebih terstruktur dan mudah dimaintain.
• Kekurangan: Membutuhkan file CSS terpisah untuk mendefinisikan kelas.

Metode setAttribute:

• Keuntungan: Fleksibel untuk menambahkan atribut apa pun.
• Kekurangan: Kode bisa menjadi kurang terbaca.

Metode Element.style Object:

• Keuntungan: Memberikan akses langsung ke objek style.
• Kekurangan: Tidak fleksibel untuk menambahkan style kompleks.

Tips Tambahan

• Gunakan document.createElement untuk membuat elemen baru dan menambahkan style.
• Gunakan document.querySelectorAll untuk memilih banyak elemen dan menambahkan style.
• Pertimbangkan untuk menggunakan framework CSS seperti Bootstrap atau Tailwind CSS untuk mempermudah pengaplikasian style.

Dengan memahami cara-cara di atas, Anda dapat dengan mudah menambahkan style ke elemen HTML dengan JavaScript dan membuat tampilan web Anda lebih dinamis.