Style绑定

目的

style绑定可以添加或者移除DOM元素的样式值。这非常有用，例如，当值为负数时将颜色变为红色。

（注：如果要修改CSS整个类，请使用css绑定）

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
   Profit Information
</div>
 
<script type="text/javascript">
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially black
    };
    viewModel.currentProfit(-50); // Causes the DIV's contents to go red
</script>

当currentProfit的值小于0时，会将style.color设置为red, 当大于0时会变成black.

参数

　　style的名字应该传递的是一个类似JavaScript对象的东西，而它的值就是这个样式的值。

　　也可以一次设置多个样式，例如，如果view model有一个isServer的属性：

　　<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }">...</div>

　　如果参数是一个observable的值，那么绑定会在值发生改变时动态的更新样式值。否则，就只会在初始化时绑定一次。

　　你可以使用任何的JavaScript表达式或者函数做为参数值，KO都会进行正确的显示。

注：当style的名称不是合法的JavaScript对象名称时

　　当样式的名称不是合法的JavaScript变量名，如font-weight或者text-decoration时，此时我们要使用这些样式的JavaScript名称，如：

　　font-weight，要写成: fontWeight

　　text-decoration，要写成：textDecoration

 

转载于:https://www.cnblogs.com/wileywong/p/4211658.html