Inline Style Binding

The appearance of HTML elements can also be controlled by adding or removing inline styles. In MeltJS, you can bind to the style to add or remove inline styles simultaneously.

Single Style Binding

You can toggle a style by binding to a Javascript expression. In the following example the font weight of the span element will be bold if isCompleted evaluates to a truthy value, normal otherwise.

1

<span style.font-weight="{isCompleted ? 'bold' : 'normal'}"> Todo </span>

Multiple Styles Binding

MeltJS support a style.*={expression} binding which allows you to easily add or removed multiple styles at the same time.

The expression needs to be evaluated as an object. Keys are the names of the styles, and the values of the keys will be assigned to the inline style properties.

In the following example, the span’s text color is changed to red and the font weight bold.

1
2
3
4
5

<div id="app1">
  <span style.*="{model.myStyles}">
  My text is red and bold
  </span>
</div>

1
2
3
4
5
6
7
8
9

Melt.app({
  elem: '#app1',
  model: {
    myStyles: {
     'font-weight': 'bold',
     'color': 'red'
    }
  }
})