css-variables-helpers

2.0.1 • Public • Published

css-variables-helpers

Helpers to get, and set, and toggle CSS Variables (aka CSS Custom Properties) in JavaScript

Install

$ npm install css-variables-helpers

Usage

import { set, toggle } from 'css-variables-helpers'

// Toggle the :root '--container-width' between 100% and 900px
toggle('container-width', ['100%', '900px'])

// Set the value of :root '--base-font-size' to 16px  
set('base-font-size', '16px')

// Set the value of '--primary-color' of an element to blue
set('primary-color', 'blue', document.querySelector('.btn'))

API

get (variable, [element])

Returns the value of the CSS variable. If element is not provided, :root is assumed.

variable
Type: String
Supports shorthand variable or --my-variable for convenience.

element
Type: DOMElement
Defaults to the root documentElement.

set (variable, [element])

Sets the value of the CSS variable. If element is not provided, :root is assumed.

variable
Type: String
Supports shorthand variable or --my-variable for convenience.

element
Type: DOMElement
Defaults to the root documentElement.

toggle (variable, valuesArray, [element])

Toggles the value of the CSS variable between the array. If element is not provided, :root is assumed.

variable
Type: String
Supports shorthand variable or --my-variable for convenience.

valuesArray
Type: Array
An array of string values to cycle through.

element
Type: DOMElement
Defaults to the root documentElement.

Package Sidebar

Install

npm i css-variables-helpers

Weekly Downloads

0

Version

2.0.1

License

MIT

Unpacked Size

4.65 kB

Total Files

5

Last publish

Collaborators

  • n3ps