Style Binding

Updated on Dec 10, 2025

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.

html

<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.

html

<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