Add Css Property Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

27

Share

Menambahkan CSS Properties dengan JavaScript

JavaScript memberikan fleksibilitas untuk memanipulasi gaya elemen HTML secara dinamis. Salah satu cara untuk melakukannya adalah dengan menambahkan properti CSS langsung ke elemen HTML. Berikut adalah cara melakukannya:

1. Menggunakan style Attribute

Cara paling sederhana adalah dengan menggunakan atribut style yang ada di elemen HTML. Anda dapat menambahkan properti CSS dan nilainya secara langsung di dalam atribut ini.

const myElement = document.getElementById("myElement");
myElement.style.backgroundColor = "red";
myElement.style.fontSize = "24px";

Kode ini akan mengubah warna latar belakang elemen dengan ID myElement menjadi merah dan ukuran fontnya menjadi 24px.

Keuntungan:

• Mudah diimplementasikan.
• Cocok untuk modifikasi gaya yang sederhana.

Kekurangan:

• Sulit untuk mengatur banyak gaya.
• Kode menjadi kurang terstruktur dan sulit dibaca.

2. Menggunakan classList

Jika Anda ingin menambahkan atau menghapus kelas CSS yang sudah didefinisikan di stylesheet Anda, gunakan classList.

const myElement = document.getElementById("myElement");
myElement.classList.add("active"); 
myElement.classList.remove("inactive");

Kode ini akan menambahkan kelas active dan menghapus kelas inactive dari elemen dengan ID myElement.

Keuntungan:

• Lebih terstruktur dan mudah diorganisir.
• Memisahkan gaya dari kode JavaScript.
• Menawarkan fleksibilitas untuk menerapkan berbagai gaya dengan kelas yang berbeda.

Kekurangan:

• Membutuhkan definisi kelas CSS terlebih dahulu.

3. Menggunakan setAttribute

Metode setAttribute memungkinkan Anda untuk mengatur atribut elemen HTML, termasuk atribut style.

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

Kode ini akan mengatur gaya elemen dengan ID myElement menjadi warna latar belakang biru dan ukuran font 18px.

Keuntungan:

• Memungkinkan Anda untuk mengatur berbagai properti gaya sekaligus.

Kekurangan:

• Kurang terstruktur dan kurang fleksibel dibandingkan dengan classList.

4. Menggunakan getComputedStyle

Metode getComputedStyle mengembalikan objek yang berisi semua properti CSS yang diterapkan pada elemen tertentu, termasuk gaya yang diterapkan secara inline, kelas, dan stylesheet eksternal.

const myElement = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(myElement);
const backgroundColor = computedStyle.getPropertyValue("background-color");
console.log(backgroundColor); // Output: "blue" 

Kode ini akan mengambil nilai dari properti background-color dan mencetaknya ke konsol.

Keuntungan:

• Memungkinkan Anda untuk memeriksa gaya yang diterapkan pada elemen dengan berbagai cara.

Kekurangan:

• Hanya untuk membaca gaya yang sudah diterapkan.

Tips

• Gunakan classList untuk menambahkan dan menghapus kelas CSS.
• Simpan gaya Anda di stylesheet eksternal dan gunakan kelas CSS untuk memanipulasi gaya dengan JavaScript.
• Gunakan getComputedStyle untuk memeriksa gaya yang diterapkan pada elemen.

Dengan memanfaatkan berbagai metode ini, Anda dapat dengan mudah memanipulasi gaya elemen HTML Anda dengan JavaScript untuk menciptakan pengalaman pengguna yang dinamis dan interaktif.