Function setFromVariables

Reads the value of a CSS variable and assign it to HTML attributes or object field.

const options = [
// Set the 'width' attribute to the value of --some-css-variable to all elements with class 'blah'
{ query: `.blah`, variable: `some-css-variable`, attribute: `width` }
// Set #blah's 'size' attribute to the value of css variable '--size'
{ id: 'blah', variable: 'size', attribute: 'size' }
// Sets someEL.blah = css variable '--hue'
{ element: someEl, variable: `hue`, field: `blah` }
]

setFromVariables(document.body, ...options);

The first parameter is the context for which CSS variable values are fetched as well as for resolving query selectors. This can usually be document.body.

  • Parameters

    • context: string | HTMLElement

      Context element which is needed for relative querying. Otherwise use document.body

    • Rest...options: CssVariableOption[]

      Details of what to do

    Returns void