Manipulate CSS Variables Per Each Element – css-proxied-vars

Category: Javascript , Recommended | March 11, 2021
Author: WebReflection
Views Total: 157 views
Official Page: Go to website
Last Update: March 11, 2021
License: MIT

Preview:

Manipulate CSS Variables Per Each Element – css-proxied-vars

Description:

css-proxied-vars is a JavaScript library that could be used to manipulate (get, set, update) CSS variables per each element.

How to use 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';

You Might Be Interested In:


Leave a Reply