Set, Read, or Update, CSS Variables Per Each Element | css-proxied-vars

css-proxied-variables

css-proxied-vars is the easiest JavaScript library way to set, read or update CSS variables for each element.

css variables css tricks, dynamic css variables, set css variable from javascript, css custom properties, scss variables, css variable scope, css root, global css variables

How to make use of it:

1. Install and import the css-proxied-vars.

# NPM
$ npm i css-proxied-vars
import proxiedVars from 'css-proxied-vars';
// or explicit only variant
import proxiedVars from 'css-proxied-vars/explicit';
// or
import proxiedVars from '//unpkg.com/css-proxied-vars?module';

2. Handle all :root CSS variables.

:root {
  --bg-color: #fff;
  background-color: var(--bg-color);
}
const htmlCSSVars = proxiedVars(document.documentElement);

3. Read CSS variables.

htmlCSSVars.bgColor

4. Set CSS variables.

htmlCSSVars.bgColor = 'black';
// or
htmlCSSVars['--bg-color'] = 'red';

Manipulate CSS Variables Per Each Element, css proxied vars Plugin/Github


See Demo And Download

Official Website(WebReflection): Click Here

This superior jQuery/javascript plugin is developed by WebReflection. For extra Advanced Usages, please go to the official website.