style: <binding-object>

优质

小牛编辑

134浏览

2023-12-01

样式绑定允许您通过操作元素的样式属性而不是应用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官方网站上找到。