jwidget/bindCss

Consumption

import bindCss, {CssUpdaterElement} from "jwidget/bindCss";

Default export#

(el: CssUpdaterElement, style: string, property: Bindable<string>): Destroyable

el
DOM element.
attr
CSS style name.
property
Style value.
returns
Binding object. You must destroy it to stop the synchronization.

Binds a CSS style value of a DOM element to a string Property.

// Bind background color style to color property value
bindCss(el, "background-color", color);

The function returns a binding object. If you need to stop the synchronization, destroy it. This is not necessary if you work with a private property and a private DOM element as in the example above. However, if you work with an external model or an external DOM element (e.g. they get passed to the constructor of the component), you must take care of the binding destruction, because life time of these objects can be longer than the life time of your component. The easiest way to do it is to own the binding:

this.own(bindCss(el, "background-color", color));

CssUpdaterElement#

Subset of JQuery element methods necessary for bindCss binding implementation.

css#

(style: string, value: string)

See JQuery.css.