Memperbarui Variabel dengan JavaScript
Perbarui properti kustom CSS secara dinamis dari JavaScript menggunakan style.setProperty().
Memperbarui Variabel dengan JavaScript adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Mengapa Memperbarui Variabel CSS dari JS?
Properti kustom CSS bersifat langsung di peramban. Mengubahnya melalui JavaScript segera memperbarui semua elemen yang menggunakan properti tersebut — sehingga tema dinamis, penggeser waktu nyata, dan gaya berdasarkan keadaan dapat dibuat tanpa mengubah banyak kelas.
Mendapatkan Nilai Properti Kustom
Baca nilai properti kustom menggunakan getComputedStyle():
<div class="demo" style="background:#3b82f6;color:#fff;padding:16px;">Reading --primary-color</div>
<p>Value: <span id="output">(reading...)</span></p>
<script>
const root = document.documentElement;
const value = getComputedStyle(root)
.getPropertyValue('--primary-color').trim();
console.log(value); // '#3b82f6'
document.getElementById('output').textContent = value;
</script>
Menetapkan Nilai Properti Kustom
Perbarui properti kustom menggunakan style.setProperty() pada elemen mana pun:
<div class="card">
Card body
</div>
<script>
// Set globally on :root
document.documentElement.style.setProperty('--primary-color', '#ef4444');
// Set on a specific element
document.querySelector('.card').style.setProperty('--card-bg', 'pink');
</script>
Menghapus Properti Kustom
Hapus penggantian properti (kembali ke nilai yang ditetapkan dalam CSS) menggunakan style.removeProperty():
<div class="badge">Removing an inline override restores the :root value</div>
<script>
// Simulate an inline override was set, then removed
document.documentElement.style.setProperty('--primary-color', 'crimson');
document.documentElement.style.removeProperty('--primary-color');
// Now the :root CSS value applies again
</script>
Pola Pengalih Tema
Pengalih tema klasik yang menukar atribut data-theme dan menentukan variabel untuk setiap tema dalam CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Bilah Kemajuan dengan Variabel CSS
Atur nilai bilah kemajuan sepenuhnya melalui variabel CSS yang ditetapkan dari JavaScript:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Melacak Posisi Mouse
Buat efek paralaks atau efek yang mengikuti kursor dengan memperbarui variabel CSS posisi saat mouse bergerak:
<div class="cursor-dot"></div>
<script>
document.addEventListener('mousemove', e => {
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});
</script>
Variabel yang Digerakkan Guliran
Perbarui variabel CSS berdasarkan posisi guliran untuk animasi yang terhubung dengan guliran (API modern menanganinya dengan lebih baik, tetapi JS+variabel tetap merupakan pendekatan sederhana):
<div style="height: 800px; background: linear-gradient(#f8fafc, #cbd5e1);">
<div class="scroll-fill"></div>
</div>
<script>
window.addEventListener('scroll', () => {
const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
document.documentElement.style.setProperty('--scroll', pct);
});
</script>
Preferensi Pengguna dengan localStorage
Simpan tema yang dipilih ke localStorage dan pulihkan saat halaman dimuat:
<button class="theme-toggle" onclick="toggleTheme()">Toggle theme</button>
<div class="content">Themed content</div>
<script>
// Restore
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.dataset.theme = saved;
// Toggle
function toggleTheme() {
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
localStorage.setItem('theme', next);
}
</script>
Animasi CSS vs JS
Untuk animasi yang halus, utamakan transisi CSS yang bereaksi terhadap perubahan properti kustom daripada perulangan requestAnimationFrame dalam JS. Peramban menangani interpolasi pada utas kompositor.
Properti Bertipe dengan @property
Mendaftarkan variabel dengan @property memungkinkan peramban melakukan interpolasi pada transisi — sesuatu yang tidak dapat dilakukan pada properti kustom yang belum terdaftar:
<div class="track">
<div class="bar"></div>
</div>
Pemeriksaan Singkat
Metode JavaScript mana yang mengubah properti kustom CSS pada elemen root?
Rangkuman
Gunakan style.setProperty() untuk memperbarui properti kustom CSS dari JavaScript. Perubahan segera diteruskan ke semua elemen yang menggunakannya. Pola ini mendukung tema dinamis, bilah kemajuan animasi, efek kursor, dan animasi yang digerakkan guliran — semuanya tanpa menyentuh daftar kelas atau string gaya sebaris untuk beberapa properti.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Memperbarui Variabel dengan JavaScript” gratis?
Ya — teks lengkap “Memperbarui Variabel dengan JavaScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Memperbarui Variabel dengan JavaScript”?
Perbarui properti kustom CSS secara dinamis dari JavaScript menggunakan style.setProperty(). Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Memperbarui Variabel dengan JavaScript” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mendeklarasikan dan Menggunakan Properti Kustom
- Nilai Fallback dan var()
- Membatasi Cakupan Variabel pada Komponen
- Memperbarui Variabel dengan JavaScript