How to dynamically change CSS variables with JavaScript?

使用document.documentElement获取:root CSS变量，用style.setProperty()设置（需--前缀和字符串值），getComputedStyle().getPropertyValue()读取，批量更新用cssText避免重排。

Getting the root element for :root CSS variables

You need a reference to the element where your CSS variables are declared — most often that’s the :root pseudo-element, which maps to document.documentElement. Using document.body or other elements works too, but only if the variables are defined there and inherited properly.

Don’t assume document.querySelector(':root') — it won’t match. Stick with document.documentElement.

Setting CSS variables with style.setProperty()

Once you have the target element (e.g., document.documentElement), call style.setProperty() with the custom property name (including --) and value:

document.documentElement.style.setProperty('--primary-color', '#3b82f6');

• The property name must include the -- prefix — 'primary-color' won’t work
• Values are strings — even numbers or units like '2rem' or '0.75' need quotes
• This overrides the variable at that element level; it does not edit the original CSS file or <style> block

Reading current CSS variable values with getComputedStyle()

To read an active value (after it’s been set or inherited), use getComputedStyle() on the same element and access getPropertyValue():

const root = document.documentElement;
root.style.setProperty('--accent', 'tomato');
const accent = getComputedStyle(root).getPropertyValue('--accent'); // 'tomato'

• getComputedStyle() returns computed values — so --accent resolves to its actual used value, not the raw CSS token
• If the variable is undefined or falls back to an invalid value, getPropertyValue() returns an empty string
• It won’t reflect changes made *before* the style has been applied in the render cycle — avoid reading immediately after setProperty() if timing matters

Updating multiple variables without repeated reflows

Calling style.setProperty() repeatedly triggers layout recalculations. For bulk updates, batch them using CSSStyleDeclaration.cssText or assign to style.cssText with a semicolon-separated string:

const root = document.documentElement;
root.style.cssText  = '; --primary: #1e40af; --spacing-md: 1.5rem; --radius: 6px;';

• Appending to cssText preserves existing inline styles — unlike direct assignment, which overwrites all
• Each declaration must end in ;, and no spaces before ; — otherwise parsing fails silently
• Prefer setProperty() for single updates; reserve cssText for coordinated theme switches or config-driven batches

CSS variables don’t cascade like regular properties — their scope depends entirely on where they’re set and how selectors inherit. If a change doesn’t appear, check whether the consuming element actually inherits from the element you modified, and whether any more-specific rule (e.g., a local style="--color: red") is overriding it.

The above is the detailed content of How to dynamically change CSS variables with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!