CODEWITHSUNDEEP
javascriptcssknockout.js
disco beat
disco beat

Reputation: 188

Modify properties of a CSS class directly using knockout 'data-bind'

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

I have a component (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 components 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 component, described in a css class, not the background of the whole component.

Upvotes: 3

Views: 4410

Answers (3)

Gluip
Gluip

Reputation: 2987

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

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

Upvotes: 1

RP Niemeyer
RP Niemeyer

Reputation: 114792

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

Upvotes: 2

PLMCHL
PLMCHL

Reputation: 29

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.

Upvotes: 2

Related Questions