Function setCssVars

  • setCssVars<TN extends TagName = "*">(
        vars: CssVars,
        target?: null | Target<TN>,
    ): ElementOf<TN>

  • Sets the CSS vars on the optionally specified target.

    If no target is specified, uses documentElement (i.e. :root).

    Type Parameters

    • TN extends TagName = "*"

      Tag name of the Element representation of target.

    Parameters

    • vars: CssVars

      Object with key of CSS variable name and value of value to set for name.

    • Optionaltarget: null | Target<TN> = document.documentElement

      Optional Element, EventTarget, or CSS selector.

    Returns ElementOf<TN>

    Element representation of the specified target.

    Remarks

    The keys in the vars argument are not limited to type CssVarName because the key (i.e. CSS variable name) is checked prior to setting it on the property.

    Throws

    InvalidCssVarError if a name in vars is not a valid CssVarName.

    Throws

    elements!InvalidElementError if the specified target wasn't found.

    Example

    HTML (Before)

    <style>
      :root {
        --color-fg: green;
      }
    </style>

    <button id="example" style="--color-bg: blue;">
      Example
    </button>

    Set in Element

    const element = findElement("#example")!;

    setCssVars({ "--color-bg", "red" }, element);

    Set in :root

    setCssVars({ "--color-fg", "blue" });

    HTML (After)

    <style>
      :root {
        --color-fg: blue;
      }
    </style>

    <button id="example" style="--color-bg: red;">
      Example
    </button>

Settings

Member Visibility