Class

This binding adds or removes one or more CSS classes to the associated DOM element. Can be used, when you need to use Knockout css binding with static and dynamic classes simultaneously. In this case, you may use css binding for static classes and class binding for dynamic classes.

Examples

Html markup

<p class="class-example-text" data-bind="class: className">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec pharetra eros.
    Sed luctus vitae ligula viverra porttitor. Vestibulum porttitor egestas lacus.
</p>
<div class="btn-group form-group" data-toggle="buttons" data-bind="radio: className">
    <label class="btn btn-primary">
    <input type="radio" name="options" value="bg-primary" />
        bg-primary
    </label>
    <label class="btn btn-primary">
    <input type="radio" name="options" value="bg-success" />
        bg-success
    </label>
    <label class="btn btn-primary">
    <input type="radio" name="options" value="bg-danger" />
        bg-danger
    </label>
</div>

View model

function ClassExampleViewModel() {
    this.className = ko.observable('bg-primary');
}

Options