knockoutJS Style Binding

In the last article, we saw how we can use css binding to add or remove css classes from HTML DOM elements. What if instead of adding or removing predefined css classes, we want to add our own custom styles to HTML DOM elements? KnockoutJS has provisions for that as well. KnockoutJS style binding allow us to add our custom styles to DOM elements. We can add custom styles to DOM elements directly or if some function or expression returns true. In this example, we shall specify both approaches.

Adding Custom Styles Via Expressions

In the following example we shall change the text color of the div to yellow if the value of the StudentAge parameter of the StudentModel class is greater than 0 else the color of the text will be red. Take a look at the following code.

<!DOCTYPE html>
<html>
    
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

 <style>
      .warningMessage {
      color: red;
      font-weight: bold;
      }
   </style>
</head>
<body>
   <div data-bind="style: { color : StudentAge() <= 0 ? 'red' : 'yellow'}">
      Age should be greater than 0.
   </div>

   <script>
      function StudentModel() {
         this.StudentAge = ko.observable(1);
      }
      var sm = new StudentModel();
      ko.applyBindings(sm);
   </script>
</body>
</html>

Download the code Try the code

Take a look at the above code. Here in the div section we use data-bind attribute to apply style binding. Inside the style binding we apply the condition which if true makes the color of the text red and if false changes the color of the text to yellow. The condition is that StudentAge of the StudentModel should have value zero or less than that. If you come down and see the script you will find that the value of the StudentAge parameter is 1, therefore if you open the webpage, you shall see a message written in yellow.

Adding Styles Directly

You can also directly add styles if you want without any expression. Take a look the following piece of code.

<!DOCTYPE html>
<html>
    
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

 <style>
      .warningMessage {
      color: red;
      font-weight: bold;
      }
   </style>
</head>
<body>
   <div data-bind="style: { color : 'brown'}">
      Age should be greater than 0.
   </div>

   <script>
      function StudentModel() {
         this.StudentAge = ko.observable(1);
      }
      var sm = new StudentModel();
      ko.applyBindings(sm);
   </script>
</body>
</html>

Download the code Try the code

In the above code, we removed the expression and directly assign the color brown to “color” property of the style. Now, if you open the webpage you shall see that the text inside the div always appear in the brown color. In this article we studied knockoutJS style binding, in the next article we shall see last type of control and appearance bindings i.e. attribute binding.

<<< KnockoutJS CSS BindingsKnockoutJS Attr Bindings >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .