Motivation
Often we need to toggle text (or whatever) CSS properties such as size, visibility, color from the JavaScript code. (For example, we show spinner when we upload a file and we want it to disappear when we are done.)
Often we need to toggle text (or whatever) CSS properties such as size, visibility, color from the JavaScript code. (For example, we show spinner when we upload a file and we want it to disappear when we are done.)
Let us use class.html and its JavaScript code class.js as an illustration.
In CSS code, we say that everything marked with the red class must have red color:
.red{color:red}
In HTML, we create a span element which will sometimes have red class
<span db="class:red">span-element becoming red when it gains the <b>red</b> class</span>
← depending on the value of the observable with the same name. Finally, this observable must be defined in JavaScript code:
var red=new DB.observable([],{type:'bool',value:false});
← when red() is true, span element above has red class and the text inside span is colored in red (as we programmed in CSS above); When red() is false, span element above has no red class.
In class.html, the value of the observable is toggled by pressing the button.