在淘汰赛js中动态改变线条的颜色答案

【问题标题】：Dynamically changing the color of a line in knockout js在淘汰赛js中动态改变线条的颜色
【发布时间】：2016-08-09 16:05:54
【问题描述】：

我有一个 css 类，它可以像这样画一条线：

.divider {
  border-top: 1px solid;
  border-top-color: #000;
}

现在每次绘制这个分隔线时，我都想动态改变颜色。我在 div 元素上使用样式绑定，如下所示：

<div class="divider" data-bind="style: { border-top-color: $data.color }"></div>

但不知何故颜色不会改变。我得到这个错误：

knockout.js?body=1:2937 Uncaught SyntaxError: Unable to parse bindings.
Bindings value: style: { border-top-color: $data.color }
Message: Unexpected token -

这样做的正确方法是什么？

【问题讨论】：

标签： javascript jquery css knockout.js

【解决方案1】：

您不能使用带有连字符的样式，因为它不是有效的 JavaScript 标识符。 Knockout documentation，部分注意：应用名称不是合法 JavaScript 变量名的样式描述了您需要做的事情：

如果您想应用 font-weight 或 text-decoration 样式，或名称不是合法 JavaScript 标识符的任何其他样式（例如，因为它包含一个连字符），您必须使用 JavaScript 名称那种风格。例如，

别写{ font-weight: someValue };写{ fontWeight: someValue }

别写{ text-decoration: someValue };写{ textDecoration: someValue }

另见：a longer list of style names and their JavaScript equivalents

所以在你的情况下，而不是

<div class="divider" data-bind="style: { border-top-color: $data.color }"></div>

你应该使用

<div class="divider" data-bind="style: { borderTopColor: $data.color }"></div>

【讨论】：

这不是 100% 准确的 - 您仍然可以使用带连字符的 css 属性，只要将它们括在引号中即可。例如<div class="divider" data-bind="style: { 'border-top-color': $data.color }"></div>

【解决方案2】：

正如@kasperoo 所说，在border-top-color 周围使用单引号。

<div class="divider" data-bind="style: { 'border-top-color': $data.color }"></div>

【讨论】：