Function removeCssVars

  • removeCssVars<TN extends TagName = "*">(
        names: `--${string}`[],
        target?: null | Target<TN>,
    ): ElementOf<TN>

  • Removes the CSS variables with names from 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

    • names: `--${string}`[]

      Array of CSS variable names to remove.

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

      Optional Element, EventTarget, or CSS selector.

    Returns ElementOf<TN>

    Element representation of the specified target.

    Throws

    InvalidCssVarError if a CSS variable could not be removed from target.

    Throws

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

    Example

    HTML (Before)

    <style>
      :root {
        --color-fg: green;
        --padding-small: "24px";
        --is-small: true;
      }
    </style>

    <button id="example" style="--color-bg: blue; --is-big: true; font-size: 18px;">
      Example
    </button>

    Remove from Element

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

    removeCssVars(["--color-bg", "--is-big"] , element);

    Remove from :root

    removeCssVars(["--color-fg", "--padding-small"]);

    HTML (After)

    <style>
      :root {
        --is-small: true;
      }
    </style>

    <button id="example" style="font-size: 18px;">
      Example
    </button>

Settings

Member Visibility