Function hasCssVar

hasCssVar(
    name: `--${string}`,
    value?: CssVarValue,
    target?: null | Target,
): boolean

Checks if the target has the CSS variable with name. If a value is specified, checks that the values match.

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

Parameters

name: `--${string}`
Name of the CSS variable to check for.
Optionalvalue: CssVarValue = undefined
Optional value of the CSS variable to check for.
Optionaltarget: null | Target = document.documentElement
Optional Element, EventTarget, or CSS selector.

Returns boolean

true if the CSS variable name is present.

Throws

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

Example

HTML

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

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

Check Element

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

hasCssVar("--color-bg", undefined, element);
// true

hasCssVar("--is-big", "true", element);
// false ("true" cannot be a string, must be the boolean value `true`)

hasCssVar("--color-bg", "blue", element);
// true

Check :root

hasCssVar("--color-fg");
// true

hasCssVar("--is-small", "true");
// false ("true" cannot be a string, must be the boolean value `true`)

hasCssVar("--color-fg", "green");
// true