Function setCssVar

  • setCssVar<TN extends TagName = "*">(
        name: `--${string}`,
        value: CssVarValue,
        target?: null | Target<TN>,
    ): ElementOf<TN>

  • Sets the CSS variable name to value in 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

    • name: `--${string}`

      Name of the CSS variable to set or update.

    • value: CssVarValue

      Value of the CSS variable.

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

      Optional Element, EventTarget, or CSS selector.

    Returns ElementOf<TN>

    Element representation of the specified target.

    Throws

    InvalidCssVarError if the name 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")!;

    setCssVar("--color-bg", "red", element);

    Set in :root

    setCssVar("--color-fg", "blue");

    HTML (After)

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

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

Settings

Member Visibility