Обновление переменных с помощью JavaScript
Динамически обновляйте пользовательские свойства CSS из JavaScript с помощью style.setProperty().
«Обновление переменных с помощью JavaScript» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Зачем обновлять переменные CSS из JS
Пользовательские свойства CSS являются динамичными в браузере. Их изменение через JavaScript немедленно обновляет все элементы, использующие это свойство, — это позволяет создавать динамические темы, ползунки реального времени и стили, зависящие от состояния, без переключения множества классов.
Получение значения пользовательского свойства
Считывайте значение пользовательского свойства с помощью 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>
Установка значения пользовательского свойства
Обновляйте пользовательское свойство с помощью style.setProperty() у любого элемента:
<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>
Удаление пользовательского свойства
Удаляйте переопределение свойства, возвращаясь к значению, объявленному в CSS, с помощью 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>
Шаблон переключателя тем
Классический переключатель тем, который заменяет атрибут data-theme и задаёт переменные для каждой темы в CSS:
<div class="panel">Dark theme applied via data-theme</div>
<script>
document.body.dataset.theme = 'dark';
</script>
Индикатор выполнения с переменной CSS
Управляйте значением индикатора выполнения только с помощью переменной CSS, заданной из JavaScript:
<div class="progress-bar"></div>
<script>
function setProgress(pct) {
document.querySelector('.progress-bar')
.style.setProperty('--progress', pct + '%');
}
setProgress(70);
</script>
Отслеживание положения мыши
Создавайте эффекты параллакса или эффекты, следующие за курсором, обновляя позиционные пользовательские свойства CSS при движении мыши:
<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>
Переменные, зависящие от прокрутки
Обновляйте переменную CSS на основе положения прокрутки для анимаций, связанных с прокруткой (современные API справляются с этим лучше, но связка JS+переменная по-прежнему остаётся простым подходом):
<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>
Пользовательские настройки с помощью localStorage
Сохраняйте выбранную тему в localStorage и восстанавливайте её при загрузке страницы:
<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>
Анимации CSS и JS
Для плавных анимаций предпочитайте переходы CSS, реагирующие на изменения пользовательских свойств, а не циклы JS с requestAnimationFrame. Браузер выполняет интерполяцию в потоке композитинга.
Типизированные свойства с помощью @property
Регистрация переменной с помощью @property позволяет браузерам интерполировать её в переходах — с незарегистрированными пользовательскими свойствами это невозможно:
<div class="track">
<div class="bar"></div>
</div>
Быстрая проверка
Какой метод JavaScript изменяет пользовательское свойство CSS у элемента root?
Итоги
Используйте style.setProperty(), чтобы обновлять пользовательские свойства CSS из JavaScript. Изменения мгновенно распространяются на все использующие их элементы. Этот подход лежит в основе динамических тем, анимированных индикаторов выполнения, эффектов курсора и анимаций, зависящих от прокрутки, — и всё это без изменения списков классов или строк встроенных стилей для множества свойств.
Часто задаваемые вопросы
Урок «Обновление переменных с помощью JavaScript» бесплатный?
Да — полный текст урока «Обновление переменных с помощью JavaScript» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обновление переменных с помощью JavaScript»?
Динамически обновляйте пользовательские свойства CSS из JavaScript с помощью style.setProperty(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Обновление переменных с помощью JavaScript»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Объявление и использование пользовательских свойств
- Резервные значения и var()
- Ограничение области видимости переменных компонентами
- Обновление переменных с помощью JavaScript