Function hasSomeCssVars

hasSomeCssVars(search: CssVarsSearch, target?: null | Target): boolean

Checks if some of the CSS variables match the search criteria in the target.

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

Parameters

search: CssVarsSearch
Array of CSS variable names or CSS variables filter to check for.
Optionaltarget: null | Target = document.documentElement
Optional Element, EventTarget, or CSS selector.

Returns boolean

true if the target matches some search criteria.

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")!;

hasSomeCssVars(["--color-bg"] , element);
// true

hasSomeCssVars({
  "--color-bg": "blue",
  "--missing": null,
}, element);
// true

hasSomeCssVars({
  "--color-bg": "blue",
  "--missing": true,
}, element);
// false

Check :root

hasSomeCssVars(["--color-fg", "--padding-small"]);
// true

hasSomeCssVars({
  "--color-fg": "green",
  "--is-small": "true",
});
// false ("true" cannot be a string, must be the boolean value `true`)

hasSomeCssVars({
  "--color-fg": "green",
  "--is-small": false,
});
// false (`--is-small` is `true`)