I would like to modify properties of a CSS class directly using knockout 'data-bind', without using JQuery css() method.

I have a ponent (bootstrap slider) on which I want to set the background color depending on the slider value. On his homepage, the author is doing it by calculating rgb ponents and then applying them with jquery css() method.

Can I data-bind properties inside a css class with knockout or must I stick with JQuery css ()?

Edit: I want to change the background-color of a part of the ponent, described in a css class, not the background of the whole ponent.

I would like to modify properties of a CSS class directly using knockout 'data-bind', without using JQuery css() method.

I have a ponent (bootstrap slider) on which I want to set the background color depending on the slider value. On his homepage, the author is doing it by calculating rgb ponents and then applying them with jquery css() method.

Can I data-bind properties inside a css class with knockout or must I stick with JQuery css ()?

Edit: I want to change the background-color of a part of the ponent, described in a css class, not the background of the whole ponent.

• javascript
• css
• knockout.js

3 Answers 3

jQuery css set's style properties on the element directly. This is the same as what the style binding does in Knockout: http://knockoutjs./documentation/style-binding.html. So, you should be able to use the style binding to acplish your task.

You can use a data-bind similar to this one:

data-bind="style: { background-color: colorRed() ? 'red' : 'black' }"

By changing the value in colorRed(), you can change to color to red or black. It is also possible to use something like this:

data-bind="style: { background-color: myColor() }"

Where myColor() return a hex color.

Be sure to use backgroundColor instead of background-color You can use this:

data-bind="style: { backgroundColor: color }"