JavaScript Jadi "Fashion Stylist": Ubah Gaya dan Kelas Elemen HTML!

Udah bisa ngubah isi teks dan atribut elemen HTML pake JavaScript? Keren! Sekarang, gimana kalau kita mau ngubah tampilannya secara dinamis? Misalnya, mau ganti warna teks pas tombol diklik, nyembunyiin elemen pas kondisi tertentu, atau nerapin serangkaian style baru ke sebuah elemen.

Ada dua cara utama buat ngontrol tampilan (style CSS) elemen HTML pake JavaScript:

1. Mengubah Style Inline Langsung: Ngubah properti CSS satu per satu lewat atribut style elemen.
2. Memanipulasi Atribut class: Nambahin atau ngapus nama kelas CSS dari elemen, di mana style-nya udah kita definisiin di file CSS terpisah. (Ini cara yang lebih disukai!)

Yuk, kita bedah keduanya!

1. Mengubah Style Inline Langsung pake element.style

Setiap elemen HTML di DOM punya properti style. Properti ini ngasih kita akses buat ngeset atau ngambil nilai properti CSS inline dari elemen tersebut.

• Cara Kerja:
  • Kamu akses element.style, terus diikuti nama properti CSS yang mau kamu ubah.
  • PENTING: Kalau nama properti CSS-nya ada tanda hubung (-), di JavaScript dia diubah jadi camelCase.
    • background-color jadi backgroundColor
    • font-size jadi fontSize
    • border-bottom-left-radius jadi borderBottomLeftRadius
    • Properti yang udah satu kata (kayak color, width, margin) tetep sama.
  • Nilai yang kamu kasih ke properti style ini harus berupa string, meskipun itu angka (misal, element.style.fontSize = "16px";, element.style.opacity = "0.5";).

Contoh Penggunaan element.style:

HTML:

<p id="teksContoh" style="color: blue;">Ini teks awal.</p>
<button id="tombolUbahStyle">Ubah Style</button>

JavaScript:

let teks = document.getElementById('teksContoh');
let tombol = document.getElementById('tombolUbahStyle');
 
// Membaca style inline (kalau ada dan diset via JS atau atribut style HTML)
// Catatan: element.style cuma bisa baca style inline, bukan style dari file CSS eksternal/internal.
// Untuk baca style yang beneran diterapin (computed style), pake window.getComputedStyle(element).
console.log(teks.style.color); // Output: blue (karena diset di HTML)
console.log(teks.style.fontWeight); // Output: "" (string kosong, karena gak diset inline)
 
tombol.addEventListener('click', function() {
    // Mengubah style inline
    teks.style.color = 'red';
    teks.style.backgroundColor = 'lightyellow';
    teks.style.fontSize = '24px';
    teks.style.padding = '10px';
    teks.style.border = '2px solid darkred';
    teks.style.fontWeight = 'bold';
 
    console.log("Style setelah diubah:", teks.style.color, teks.style.backgroundColor);
});

Pas tombol diklik, semua style di atas bakal diterapin ke paragraf #teksContoh sebagai style inline.

Kelebihan element.style:

• Langsung dan cepet buat ngubah satu atau dua properti spesifik.

Kekurangan element.style:

• Mencampuradukkan JavaScript (perilaku) dengan CSS (presentasi). Ini kurang ideal buat pemisahan concerns.
• Susah di-maintain kalau banyak style yang mau diubah. Kodemu jadi penuh sama baris-baris element.style.properti = ....
• Spesifisitasnya tinggi banget (kayak inline style di HTML), jadi bisa jadi susah di-override sama aturan CSS di file eksternal.
• Kurang reusable.

Kapan Dipake?

• Buat perubahan style dinamis yang simpel banget dan cuma melibatkan satu atau dua properti.
• Buat ngeset properti yang nilainya diitung sama JavaScript (misal, posisi elemen yang diitung dinamis).
• Tapi, untuk perubahan style yang lebih kompleks atau buat state yang beda-beda, ada cara yang lebih baik...

2. Memanipulasi Atribut class pake element.classList - Cara yang Lebih Kece!

Ini adalah cara yang jauh lebih baik dan direkomendasikan buat ngubah tampilan elemen secara dinamis pake JavaScript.

• Cara Kerjanya:

  1. Kamu definisikan dulu semua style yang kamu butuhin di file CSS eksternalmu pake nama-nama kelas yang deskriptif. Misalnya, kamu punya class .aktif, .tersembunyi, .mode-gelap, .highlight, dll.
  2. Di JavaScript, kamu tinggal nambahin atau ngapus nama kelas itu dari elemen HTML yang mau diubah. Browser bakal otomatis nerapin atau ngilangin style yang udah kamu definisiin di CSS buat kelas itu.

• Objek elemen di DOM punya properti classList. Properti classList ini ngasih kita beberapa metode yang berguna banget buat ngoprek kelas:

  • element.classList.add('namaKelasBaru', 'kelasLain'): Nambahin satu atau lebih nama kelas ke elemen.
  • element.classList.remove('namaKelasYgDihapus', 'kelasLain'): Ngapus satu atau lebih nama kelas dari elemen.
  • element.classList.toggle('namaKelas'): Kalau kelasnya belum ada, dia ditambahin. Kalau udah ada, dia diapus. Kayak saklar lampu!
  • element.classList.contains('namaKelas'): Ngecek apakah elemen punya kelas tertentu. Ngembaliin true atau false.
  • element.classList.replace('kelasLama', 'kelasBaru'): Mengganti kelas lama dengan kelas baru.

Contoh Penggunaan element.classList:

HTML:

<div id="kotakPesan" class="info">Ini pesan informasi.</div>
<button id="tombolToggleError">Toggle Status Error</button>
<button id="tombolTambahSorot">Tambah Sorotan</button>

CSS (style.css):

.info {
    padding: 15px;
    border: 1px solid blue;
    background-color: lightblue;
    color: darkblue;
    margin-bottom: 10px;
}
 
.error { /* Style buat state error */
    border-color: red;
    background-color: lightpink;
    color: darkred;
    font-weight: bold;
}
 
.sorot { /* Style tambahan buat sorotan */
    box-shadow: 0 0 10px yellow;
}

JavaScript:

let kotakPesan = document.getElementById('kotakPesan');
let tombolToggle = document.getElementById('tombolToggleError');
let tombolSorot = document.getElementById('tombolTambahSorot');
 
tombolToggle.addEventListener('click', function() {
    // Toggle kelas 'error'. Kalau belum ada, ditambahin. Kalau udah ada, diapus.
    kotakPesan.classList.toggle('error');
 
    // Kita juga bisa ganti kelas 'info' jadi 'error' atau sebaliknya
    // if (kotakPesan.classList.contains('info')) {
    //     kotakPesan.classList.remove('info');
    //     kotakPesan.classList.add('error');
    // } else {
    //     kotakPesan.classList.remove('error');
    //     kotakPesan.classList.add('info');
    // }
    // Tapi toggle lebih simpel untuk on/off satu kelas
});
 
tombolSorot.addEventListener('click', function() {
    kotakPesan.classList.add('sorot'); // Tambahin kelas 'sorot'
    console.log("Apakah kotak pesan punya kelas 'info'?", kotakPesan.classList.contains('info')); // Output: true
});

Di contoh ini, pas tombol "Toggle Status Error" diklik, tampilan .kotakPesan bakal berubah antara style .info (default) dan kombinasi .info.error karena kelas error ditambahin atau diapus. Pas tombol "Tambah Sorotan" diklik, efek bayangan kuning dari kelas .sorot bakal diterapin.

Kelebihan Memanipulasi classList:

• Pemisahan Concerns yang Jelas: JavaScript ngurusin logika (kapan kelas ditambah/hapus), CSS ngurusin gimana tampilan kelas itu. Rapi!
• Kode Lebih Bersih dan Terbaca: Kode JavaScript jadi lebih fokus ke logika, gak pusing sama detail properti CSS.
• Gampang Di-maintain: Kalau mau ngubah tampilan state tertentu, kamu cukup ubah di file CSS-nya aja, gak perlu sentuh JavaScript-nya.
• Reusable: Kelas CSS bisa dipake di banyak elemen.
• Performa Lebih Baik (Umumnya): Nambah/ngapus kelas biasanya lebih efisien buat browser daripada ngubah banyak style inline satu-satu.

Kapan Pake classList?

• HAMPIR SELALU ini cara yang lebih baik buat ngubah tampilan elemen secara dinamis, terutama kalau perubahannya melibatkan beberapa properti CSS atau buat ngatur state elemen (misalnya, aktif, nonaktif, tersembunyi, error, sukses, dll.).

Properti element.className (Cara Lama, Kurang Fleksibel)

Sebelum ada classList, cara ngubah kelas elemen adalah pake properti className.

• element.className ngambil atau ngeset seluruh string yang ada di atribut class elemen.

  // HTML: <div id="myDiv" class="satu dua"></div>
  let divSaya = document.getElementById('myDiv');
  console.log(divSaya.className); // Output: "satu dua"
   
  // Nambahin kelas "tiga" (cara ribet):
  divSaya.className += " tiga"; // Harus hati-hati sama spasi
  console.log(divSaya.className); // Output: "satu dua tiga"
   
  // Ngehapus kelas "dua" (lebih ribet lagi):
  divSaya.className = divSaya.className.replace("dua", "").trim(); // Perlu regex atau cara lain yg lebih aman
  console.log(divSaya.className);
   
  // Mengganti semua kelas:
  divSaya.className = "baru semua";

• Kekurangan className: Repot banget buat nambah atau ngapus satu kelas spesifik kalau elemennya udah punya banyak kelas. Kamu harus manipulasi string secara manual, yang rawan error.
• Kesimpulan: Selalu utamakan pake element.classList karena jauh lebih gampang dan aman buat ngelola kelas individual. className mungkin masih berguna kalau kamu mau ngeset ulang semua kelas sekaligus jadi string tertentu.

Mengubah style dan kelas elemen pake JavaScript ini adalah kunci buat bikin UI (User Interface) yang dinamis dan responsif terhadap aksi pengguna. Ingat, memanipulasi classList itu biasanya cara yang lebih bersih dan gampang di-maintain dibanding ngubah element.style satu-satu, terutama buat perubahan tampilan yang lebih signifikan atau buat ngatur "state" elemen.

Di materi berikutnya, kita bakal belajar cara "ngedengerin" aksi pengguna (kayak klik mouse atau ketikan keyboard) pake Event Handling!