@web3r/flowerkit
Version:
Tree-shakable JavaScript and TypeScript utility library for frontend/browser apps: DOM, events, arrays, objects, strings, date, JSON, and network helpers (ESM/CJS, SSR-friendly).
20 lines (19 loc) • 1.32 kB
JavaScript
import{getDocument}from"ssr-window";
/**
* Sets CSS3 variable to specific DOM node
* @param el{HTMLElement=} DOM element
* @param variable{String} variable name
* @param value{String|Number|Boolean=} variable value
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
* @returns {void}
* @throws {TypeError} setCSSVar: el must be an HTMLElement
* @throws {TypeError} setCSSVar: variable must be a non-empty string
* @throws {TypeError} setCSSVar: value must be a string|number|boolean
* @example
* // How to set CSS variable to div?
* // <div id="myBlock"></div>
* const block = document.getElementById("myBlock");
* setCSSVar(block, "myVar", 10);
* // <div id="myBlock" style="--myVar: 10"></div>
*/const setCSSVar=(el=getDocument().documentElement,variable,value="")=>{if(!el||typeof el.style!=="object")throw new TypeError("setCSSVar: el must be an HTMLElement");if(typeof variable!=="string"||variable.length===0)throw new TypeError("setCSSVar: variable must be a non-empty string");if(typeof value!=="string"&&typeof value!=="number"&&typeof value!=="boolean")throw new TypeError("setCSSVar: value must be a string|number|boolean");el.style.setProperty(variable.startsWith("--")?variable:`--${variable}`,value+"")};export{setCSSVar};
//# sourceMappingURL=index.mjs.map