change css with knockoutjs

Question

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.

I initially thought that using virtual elements would work: ``. But I just tested this and it didn't work. Looking at the source code, the KO text binding attempts to create a child text node, which is not allowed within ` — Jonathan, Apr 17 '14 at 17:42
That's not how we navigate the html/css world...you don't alter the contents of a class...css remains static at build time...you simply make enough classes to fit your needs and use the class names to change your view OR just change the IN-line css style on the object. — beauXjames, Apr 18 '14 at 18:20

GôTô · Answer 1 · 2014-04-17T21:29:15.687

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/

As I wrote, I dont want it to be on the div, but I want it replaced in the style block.... — , Apr 17 '14 at 16:03
Sorry I did not notice that when I posted my answer. I will update it — GôTô, Apr 17 '14 at 21:11

john Smith · Accepted Answer · 2014-04-19T10:54:36.300

0

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);

edited Apr 19 '14 at 10:54

answered Apr 17 '14 at 15:57

john Smith

17,409
11
76
117

As I wrote, I dont want it to be on the div, but I want it replaced in the style block.... Like so: – Apr 17 '14 at 16:04
updated my answer, now theres a computed function that listens to user inout and everytime it changes it will append a style block to the head which will override the old ones – john Smith Apr 19 '14 at 10:55

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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.

score 0 · Answer 4 · answered Apr 17 '14 at 16:20

0

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>

answered Apr 17 '14 at 16:20

Ilya

29,135
19
110
158

Cant do it like that I think - I have a large form where the user can change background colors, padding, link color etc - When they write a new input in the input fields, the CSS should update to what they are writing, sort of like: http://css3gen.com/box-shadow/ – Apr 17 '14 at 16:25

change css with knockoutjs

4 Answers4

Edit