Question

我有一个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 -

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

Answer 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>

Answer 2

正如@kasperoo所提到的，请在border-top-color周围使用单引号。

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

动态改变击倒js中线条的颜色

2 个答案: