css-vars.md

Classes

CssVars

CssVars objects allow to read / write CSS variables (custom properties) for the given element (and eventual pseudo-element)

Functions

cssVars(element, [pseudoElement]) ⇒ CssVars

Returns a CssVars object for a given element and optional pseudo-element, using a cache to avoid unnecessary object creation (when called with the same element and pseudo-element, it will always return the same object)

CssVars

CssVars objects allow to read / write CSS variables (custom properties) for the given element (and eventual pseudo-element)

• CssVars
  • new CssVars(element, [pseudoElement])
  • instance
    • .has(name) ⇒ boolean
    • .get(name, [fallbackValue]) ⇒ string | number | boolean | Array | object | null
    • .getString(name, [fallbackValue]) ⇒ string
    • .set(name, [value])
    • .remove(name)
  • static
    • .encode(value) ⇒ string
    • .decode(value) ⇒ string | number | boolean | Array | object | null

new CssVars(element, [pseudoElement])

Creates an instance of CssVars.

Param	Type	Description
element	Element	the element for which we are creating the instance
[pseudoElement]	string	the optional pseudo-element. Examples: ':before', ':after', ':marker'

cssVars.has(name) ⇒ boolean

Checkes if the given variable name has been set for the given element. A variable is considered to be set when the value is different from an empty string

Param	Type	Description
name	string	the name of the variable to be checked. It does not require the '--' at the beginning.

cssVars.get(name, [fallbackValue]) ⇒ string | number | boolean | Array | object | null

Gets the value of a variable (cast to a suitable standard type) or the given fallbackValue (or an empty string) when the variable is not set

Returns: string | number | boolean | Array | object | null - the variable value or the fallbackValue or an empty string when the variable is not set

Param	Type	Description
name	string	the name of the variable to be read. It does not require the '--' at the beginning.
[fallbackValue]	string, number, boolean, Array, object, null	when the variable is not set this fallbackValue will be returned

cssVars.getString(name, [fallbackValue]) ⇒ string

Exactly like the get() method, but without casting the value type, it will be returned as string

Returns: string - the variable value as a string or the fallbackValue or an empty string when the variable is not set

Param	Type	Description
name	string	the name of the variable to be read. It does not require the '--' at the beginning.
[fallbackValue]	string	when the variable is not set this fallbackValue will be returned

cssVars.set(name, [value])

Sets one or more CSS variables. Plain objects and arrays are stored in their JSON representation

Param	Type	Description
name	string, object	the name of the variable to be set or a plain object containing multiple name-value entries to be set. The names can be expressed without the '--', it will be added automatically.
[value]	string, number, boolean, Array, object, null	The value to be set when the name is a string

cssVars.remove(name)

Removes a variable previously set with JS or in the inline style attribute. It cannot remove a variable set by a separated CSS file or by a <style> element.

Param	Type	Description
name	string	the name of the variable to be removed. It does not require the '--' at the beginning.

CssVars.encode(value) ⇒ string

Cast values to strings. Used before storing the values in the CSS variable

Returns: string - the string representation of the given value

Param	Type	Description
value	string, number, boolean, Array, object, null	the value to be cast

CssVars.decode(value) ⇒ string | number | boolean | Array | object | null

Try to cast a value expressed as string to a more suitable standard type

Returns: string | number | boolean | Array | object | null - The value after the cast

Param	Type	Description
value	string	the string value to be converted

cssVars(element, [pseudoElement]) ⇒ CssVars

Returns a CssVars object for a given element and optional pseudo-element, using a cache to avoid unnecessary object creation (when called with the same element and pseudo-element, it will always return the same object)

Returns: CssVars - a CssVars object for the given element and pseudo-element

Param	Type	Default	Description
element	Element		the element for which we are creating the instance
[pseudoElement]	string	null	the optional pseudo-element. Examples: ':before', ':after', ':marker'