JavaScript can directly manipulate CSS custom properties (CSS variables), get variable values ??through getComputedStyle() and getPropertyValue(), and update variable values ??using setProperty(). The specific steps are as follows: 1. Use getComputedStyle(element).getPropertyValue('--variable-name') to obtain the variable value, and note that you need to use trim() to remove spaces on the result; 2. Use element.style.setProperty('--variable-name', 'new-value') to set a new value, which can be applied to the global (such as document.documentElement) or specific elements; 3. You can combine animation and transition to achieve dynamic effects, but you need to pay attention to browser compatibility; 4. When operating, you need to pay attention to the inheritance, scope and case sensitivity of variables. Correct use can realize interactive functions such as theme switching, dynamic layout, etc.

JavaScript can definitely interact with CSS Custom Properties (also known as CSS variables). It's not some hidden trick or advanced technique—it's straightforward once you understand how the browser exposes these values ??through the DOM.

Accessing CSS Variables from JavaScript

You can get the value of a CSS variable using getComputedStyle() and the getPropertyValue() method. This is especially useful when you want to read a variable's current value, maybe to use in logic or animations.

For example:

 const root = document.documentElement;
const bgColor = getComputedStyle(root).getPropertyValue('--bg-color');
console.log(bgColor.trim()); // often has leading/trailing space, so trim it

This lets you access any custom property defined on that element, even if it was inherited from a parent or set at the :root level.

A common gotcha: always remember to trim the result , because getPropertyValue() often returns values ??with extra whitespace.

Updating CSS Variables with JavaScript

Changing the value of a CSS variable is done by setting a new value directly on the element's style using setProperty() . This is super handy for dynamic UI changes like switching themes, adjusting layout based on user input, etc.

Example:

 document.documentElement.style.setProperty('--bg-color', '#ff0000');

That line updates the --bg-color variable globally (assuming it was defined on :root ). You can also target specific elements:

 document.querySelector('.box').style.setProperty('--text-size', '1.5rem');

Just keep in mind that this affects only the inline style of that particular element, not all instances of the variable elsewhere unless they inherit it.

Using CSS Variables in Animations or Transitions

One powerful but underused technique is combining CSS variables with JavaScript to control transitions or animations. For instance, you might want to smoothly change a color theme or adjust spacing dynamically.

Here's how you might do that with a transition:

 :root {
  --main-color: #007bff;
  transition: --main-color 0.3s ease;
}

Then in JS:

 document.documentElement.style.setProperty('--main-color', '#ff0000');

This works in most modern browsers, though be aware: not all browsers support transitions on CSS variables natively . So while it looks clean, test carefully or handle fallbacks if needed.

Watch Out for Scope and Cascade

CSS variables follow the same rules of scope and inheritance as regular CSS. So where you define them matters.

If you define a variable inside .theme-dark , then only children of that element will see that version of the variable. When you access it via JavaScript, make sure you're targeting the right element.

Also, keep in mind that custom properties are case-sensitive , so --MainColor and --maincolor are different.

So when working with JS:

• Always double-check which element holds the variable.
• Be consistent with naming.
• Use dev tools to inspect computed styles if things don't behave as expected.

Basically that's it.

The above is the detailed content of How can JavaScript interact with CSS Custom Properties?. For more information, please follow other related articles on the PHP Chinese website!