How Can I Access and Modify CSS Custom Properties with JavaScript?

Accessing CSS Custom Properties with JavaScript

Custom CSS properties, or CSS variables, provide a way to define and reuse style values throughout a stylesheet. To manipulate these properties using JavaScript, there are several methods available.

One approach is through the 'document.body.style.setProperty()' method:

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue); //set

For example, in the provided code snippet where the 'background-color' property is set using a custom property '--(mycolor)', it would be modified as follows:

function plain_js() { 
  document.body.style['font-weight'] = 'bold';
  document.body.style.setProperty('--mycolor', 'red');
}

This method directly sets the CSS custom property's value, and changes will be reflected in the computed style of the element.

Alternatively, you can use jQuery to work with CSS custom properties:

$('body').css('--foo-bar', newValue); //set

This method uses the jQuery 'css()' function to set or retrieve the value of a CSS property, including CSS variables:

function jQuery_() {
  $('body').css('font-weight', 'bold');
  $('body').css('--mycolor', 'red');
}

By using these methods, you can dynamically control CSS custom properties and modify the visual appearance of your web pages and applications.

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