Style Binding

The style binding sets the style (CSS) attributes of the target DOM element.

Getting Started

The following example demonstrates how to use the style binding.

<span data-bind="style: {color: priceColor, fontWeight: priceFontWeight},
             text: price"></span>

<script>
var viewModel = kendo.observable({
    price: 42,
    priceColor: function() {
        var price = this.get("price");

        if (price <= 42) {
            return "#00ff00";
        } else {
            return "#ff0000";
        }
    },
    priceFontWeight: function() {
        var price = this.get("price");

        if (price <= 42) {
            return "bold";
        } else {
            return ""; //will reset the font weight to its default value
        }
    }
});

kendo.bind($("span"), viewModel);
</script>

The following example demonstrates the expected output.

<span style="color: #00ff00; font-weight: bold">42</span>

Using Style Attributes Which Contain Dashes

If the style attribute contains a dash, such as font-weight, font-size, background-color etc) you should omit the dash and capitalize the next letter (fontWeight, fontSize, backgroundColor).

Resetting Style Attributes to Their Original Value

To reset the value of a style attribute set it to empty string: "".

See Also

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the HTML Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding