CSS绑定
css绑定会对元素的CSS类进行操作。在某些情况下这将非常有用，例如：当数值是负的时将其高亮显示。
（注：如果如果不想直接更改CSS类，而是只要改其中一个样式，则需要使用style绑定）
示例：使用静态的CSS类
<div data-bind="css: { profitWarning: currentProfit() < 0 }"> Profit Information </div> <script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) // Positive value, so initially we don‘t apply the "profitWarning" class }; viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied </script>
当currentProfit的值小于0时就会将profitWarning的类绑定上，当大于0时就会移除这个类。
示例：使用动态的类
<div data-bind="css: profitStatus"> Profit Information </div> <script type="text/javascript"> var viewModel = { currentProfit: ko.observable(150000) }; // Evalutes to a positive value, so initially we apply the "profitPositive" class viewModel.profitStatus = ko.pureComputed(function() { return this.currentProfit() < 0 ? "profitWarning" : "profitPositive"; }, viewModel); // Causes the "profitPositive" class to be removed and "profitWarning" class to be added viewModel.currentProfit(-50); </script>
当currentProfit小于0时就会将profitWarning类赋上，否则将会使用profitPositive类。
参数
如果使用静态的CSS类名，这时可以传递一个JavaScript对象，它的名称就是CSS的类名，它的值(true, false)用来判断使用哪一个类。
也可以一次设置多个CSS类。例如，如果view model有一个isServer的属性，
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
也可以用引号括起来多个类名，使用同一个条件设置CSS类：
<div data-bind="css: { profitWarning: currentProfit() < 0, ‘major highlight‘: isSevere }">
非bool的值会转换为造价的bool值，如，0和null是false, 21、非null是true.
如果绑定的参数是一个observable的值，那么当值改变时，CSS类也会更改。反之，只会在初始化时绑定一次。
如果要使用动态的CSS类，可以传递CSS类名的字符串。如果参数指向一个observable的值，绑定会将原来的添加的类移除然后按observable的值重新绑定。
我们可以使用任意的JavaScript表达式或者函数来绑定CSS类。
注：绑定类名不是合法的JavaScript变量的CSS类
可以这样写：
<div data-bind="css: { ‘my-class‘: someValue }">...</div>
使用引号把类名括起来就可以了。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
