setStyleProperty

Sets or removes one inline style property: the helper compiled templates call for the style: prefix.

Sets or removes one inline style property: the helper compiled templates call for the style: prefix. Other inline properties are left alone.

Import#

import { setStyleProperty } from "@shadow-js/web";

Signature#

function setStyleProperty(el: HTMLElement | SVGElement, name: string, value: unknown): void

Parameters#

Name	Description
`el`	HTML or SVG element.
`name`	CSS property in camelCase (`backgroundColor`, `msTransform` gives `-ms-transform`) or kebab-case, or a custom property (`--accent`, kept as is).
`value`	`null`, `undefined` and `false` remove the property. A number is in pixels, as in React, unless it is `0`, the property is unitless (`opacity`, `zIndex`, `flexGrow`, `lineHeight`, ...) or a custom property. Any other value is written as `String(value)`.

Examples#

import { setStyleProperty } from "@shadow-js/web";

const el = document.createElement("div");
setStyleProperty(el, "marginTop", 8); // margin-top: 8px
setStyleProperty(el, "--accent", "rebeccapurple");
setStyleProperty(el, "opacity", 0.5); // unitless