CODEWITHSUNDEEP
javascriptknockout.js
user431619
user431619

Reputation:

change css with knockoutjs

Lets say that I have a div with a background color of #333333, and I have an input field where the user can input their own hex value, ex: #000000, and then I want the div's background color to change to #000000 on the fly....

example: HTML:

<div class="mydiv"></div>

css: 

<style type="text/css">.mydiv { background-color:#333333; }</style>

Then when the user changes the value via an input type="text" field, when the CSS should change in the style="text/css" block.

How do I make that binding? I can't use the in my style block, because that is not valid CSS, and I don't want to do it on my like and then insert the style here... So again, I want to change the CSS in my style block, and not add a style to my div element.

Sort of like this where they update it on the fly; http://css3gen.com/box-shadow/ When you change something, the CSS behind changes, so that you can preview your element on the fly.

Upvotes: 0

Views: 2360

Answers (4)

john Smith
john Smith

Reputation: 17906

pseudohtml : 

<input type="text" data-bind="value:userInput">

pseudoscript:

var MyModel=function(data){
   var self=this;
   self.userInput=ko.observable('#333333');
   self.computedCss=ko.computed(function(){
      //appends Style block to head everytime userInput changes
      appendal="<style>.myClass { background-color: "+self.userInput()+";!important}</style>";
      $('head').append(appendal);
   }
}

myModel = new MyModel({});
ko.applyBindings(myModel);

Upvotes: 0

G&#244;T&#244;
G&#244;T&#244;

Reputation: 8053

Use style binding

   <div data-bind='style: { "backgroundColor": CustomBGC }'>

http://jsfiddle.net/nyothecat/jKysB/3/

Edit: Since you want to update the style, you can make use of the cascading style sheet.

Define a class with init color, then create a style tag with a text binnding. Fill this one with your new color.

In your css file:

.myClass { background-color: #f00 }

Make sure to put your css file before the following

<div id="koRoot">
    <div class="myClass">
        <input type='text' data-bind="value: customColor" />
    </div>
    <style data-bind="text: myObservableStyle(customColor)"></style>
</div>

And the javascript:

$(document).ready(function () {
    var ViewModel = {
        customColor: ko.observable("#f00"),
        myObservableStyle: function (obs) {
            return ".myClass { background-color: " + obs() + " }";
        }
    }
    ko.applyBindings(ViewModel, document.getElementById("koRoot"));
});

http://jsfiddle.net/k97ZZ/1/

Upvotes: 1

Ilya
Ilya

Reputation: 29693

You can use virtual if binding

<style type="text/css">
   <!-- ko if: someExpression -->
        .mydiv { background-color:#333333; }
   <!-- /ko -->
   <!-- ko if: !someExpression -->
        .mydiv { background-color:#000000; }
   <!-- /ko -->
</style>

Upvotes: 0

Akshat Jiwan Sharma
Akshat Jiwan Sharma

Reputation: 16000

You can use the style binding along with the value binding

 <input data-bind="value: inputColor" />
  <div data-bind="style: { color: inputColor()}">

  Something

</div>



var viewModel = {
    inputColor: ko.observable() 
};

Edit

Since you want to change the style element itself use the text binding on style tag. One thing to remember that entire style will be changed so you will have to maintain valid css rules before updating the element.

 <style data-bind="text:inputColor"></style>

You might want to subscribe to the inputColor observable so you can change the input to valid css before populating the style element.

This question might be relevant.

Upvotes: 0

Related Questions