Skip to content

DOM element styles

Manipulate DOM styles with ease.

Result box:

updateElementStyles

Update styles of an element.

Type definition

function updateElementStyles(
element: Element | HTMLElement | null,
styles: CustomStyles,
options?: UpdateStyleOptions,
): void
NameTypeDescription
CustomStyles{[key: string]: string | number | undefined | null}Styles to be updated.
Key is CSS property name and should be a kebab-case string (eg: {'border-radius': '1rem'}).
UpdateStyleOptions{ignoreNilValue?: boolean; cache?: boolean | "once"}updateElementStyles’s options

Options

NameTypeDefaultDescription
ignoreNilValuebooleanfalseIf true, it will ignore updatiing the properties with undefined or null values.
cacheboolean | "once"falseCache the original styles.
Only cache value of provided properties that have been updated (depending on ignoreNilValue option).
If set to "once", it won’t override existing cached styles.

resetElementStyles

Reset styles of an element.

Depending on provided properties, if the original styles have been cached, it will restore the original styles, otherwise, it will be removed from the current styles.

Type definition

function resetElementStyles(element: Element | HTMLElement | null, properties?: string[]): void