style: <binding-object>
样式绑定允许您通过操作元素的样式属性而不是应用CSS类来将内联样式应用于HTML DOM元素。 由于内联样式，此绑定需要键值对。
语法 (Syntax)
style: <binding-object>
参数 (Parameters)
JavaScript对象应作为参数传递，其中属性名称引用样式属性，值引用要应用于元素的所需值。
也可以同时应用多种样式。 假设您在ViewModel中有折扣属性并且想要添加它，那么代码将如下所示 -
<div data-bind = "style: {
color: productStock() < 0 ? 'red' : 'blue',
fontWeight: discount() ? 'bold' : 'normal'
}>
如果没有productStock，则字体变为红色。 否则，它变成蓝色。 如果折扣设置为true，则“产品详细信息”将变为粗体字体。 否则，它将保持正常字体。
如果ViewModel属性是可观察的，则根据新更新的参数值应用样式。 如果它不是可观察值，则样式第一次仅应用一次。
例子 (Example)
让我们看一下下面的示例，该示例演示了样式绑定的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS style binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<div data-bind = "style: { color: productStock() < 0 ? 'red' : 'black' }">
Product Details.
</div>
<script type = "text/javascript">
function AppViewModel() {
this.productStock = ko.observable(30000) // initially black as positive value
this.productStock(-10); // now changes DIV's contents to red
};
var vm = new AppViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在style-bind.htm文件中。
在浏览器中打开此HTML文件。
如果productStock低于0，则产品详细信息变为红色。 否则，如果库存可用，它就会变黑。
观察 (Observations)
非法的Javascript变量名称
JavaScript中不允许使用CSS样式名称font-weight 。 相反，将其写为fontWeight （JavaScript中不允许使用变量名中的连字符）。
Click here查看所有JavaScript样式属性，这些属性也可在KO官方网站上找到。
