Aktualizowanie zmiennych za pomocą JavaScript
Nauczy się Pan/Pani dynamicznie aktualizować niestandardowe właściwości CSS z poziomu JavaScript za pomocą style.setProperty().
Aktualizowanie zmiennych za pomocą JavaScript to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Dlaczego aktualizować zmienne CSS za pomocą JavaScriptu?
Właściwości niestandardowe CSS są w przeglądarce dynamiczne. Zmiana ich za pomocą JavaScriptu natychmiast aktualizuje wszystkie elementy korzystające z danej właściwości — umożliwiając tworzenie dynamicznych motywów, suwaków działających w czasie rzeczywistym i stylów zależnych od stanu bez przełączania wielu klas.
Odczytywanie wartości właściwości niestandardowej
Wartość właściwości niestandardowej można odczytać za pomocą 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>
Ustawianie wartości właściwości niestandardowej
Wartość właściwości niestandardowej można zaktualizować za pomocą style.setProperty() na dowolnym elemencie:
<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>
Usuwanie właściwości niestandardowej
Przesłonięcie właściwości można usunąć, przywracając wartość zadeklarowaną w CSS, za pomocą 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>
Wzorzec przełącznika motywów
Klasyczny przełącznik motywów, który zamienia atrybut data-theme i definiuje zmienne dla poszczególnych motywów w CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Pasek postępu ze zmienną CSS
Wartością paska postępu można sterować wyłącznie za pomocą zmiennej CSS ustawianej z JavaScriptu:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Śledzenie pozycji myszy
Efekty paralaksy lub podążania za kursorem można tworzyć, aktualizując położeniowe zmienne CSS podczas ruchu myszy:
<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>
Zmienne sterowane przewijaniem
Zmienną CSS można aktualizować na podstawie pozycji przewijania, aby tworzyć animacje powiązane z przewijaniem (nowoczesne API radzą sobie z tym lepiej, ale JavaScript ze zmienną nadal jest prostym rozwiązaniem):
<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>
Preferencje użytkownika z localStorage
Wybrany motyw można zapisać w localStorage i przywrócić podczas ładowania strony:
<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>
Animacje CSS a animacje JavaScript
W przypadku płynnych animacji należy preferować przejścia CSS reagujące na zmiany właściwości niestandardowych zamiast pętli JavaScriptu z użyciem requestAnimationFrame. Przeglądarka obsługuje interpolację w wątku kompozytora.
Typowane właściwości za pomocą @property
Zarejestrowanie zmiennej za pomocą @property umożliwia przeglądarkom interpolowanie jej podczas przejść — co nie działa w przypadku niezarejestrowanych właściwości niestandardowych:
<div class="track">
<div class="bar"></div>
</div>
Szybkie sprawdzenie
Jaka metoda JavaScriptu zmienia właściwość niestandardową CSS na elemencie głównym?
Podsumowanie
Do aktualizowania właściwości niestandardowych CSS z poziomu JavaScriptu należy używać style.setProperty(). Zmiany natychmiast propagują się do wszystkich korzystających z nich elementów. Ten wzorzec umożliwia tworzenie dynamicznych motywów, animowanych pasków postępu, efektów podążania za kursorem i animacji sterowanych przewijaniem — bez modyfikowania list klas ani ciągów stylów inline dla wielu właściwości.
Często zadawane pytania
Czy lekcja „Aktualizowanie zmiennych za pomocą JavaScript” jest bezpłatna?
Tak — pełny tekst „Aktualizowanie zmiennych za pomocą JavaScript” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Aktualizowanie zmiennych za pomocą JavaScript”?
Nauczy się Pan/Pani dynamicznie aktualizować niestandardowe właściwości CSS z poziomu JavaScript za pomocą style.setProperty(). Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Aktualizowanie zmiennych za pomocą JavaScript”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Deklarowanie i używanie właściwości niestandardowych
- Wartości awaryjne i var()
- Zakres zmiennych dla komponentów
- Aktualizowanie zmiennych za pomocą JavaScript