css – Knockout风格绑定：firefox不设置背景颜色？

当我尝试使用样式knockout.js绑定更改一个小盒子的背景颜色时：

<input class="biggerBox" type="text" data-bind="value: colorText,valueUpdate: 'afterkeydown'" />
<div class="littleBox" data-bind="style: {'background-color': colorText}"></div>

在js：

var viewmodel = {
    colorText: ko.observable('rgba( 80,120,160,1)')
};
ko.applyBindings(viewmodel);

它的工作原理就像我在Chrome和Safari中的预期一样,当我在输入框中输入文本时,小框的背景颜色会改变.但不是在Mac上的Firefox 24.0中colorText可观察到的变化,但背景颜色从未设置.但是,如果我尝试改变前景色,那么它适用于所有Chrome,Safari和Firefox.我没有尝试过IE.

我在这里误解了编程吗？还是这是一个knockout.js的bug？还是Firefox的错误？这与KnockoutJS style bindings – what am I doing wrong?似乎没有任何关系

jsfiddle here

解决方法

你应该使用backgroundColor属性而不是background-color.

活Demo.

这不是一个特定于敲门的事情.从the relevant KO source code file可以看出,绑定设置如下：

element.style[styleName] = styleValue || "";

Firefox处理与Chrome相同的element.style […]语法,可以看到如果在两个控制台窗口中键入以下内容：

document.body.style['background-color'] = 'red'

这可以在Chrome中运行,而不是在Firefox. (有趣的是,它也适用于IE11.)

原文地址：https://www.jb51.cc/css/217292.html