Question

我正在尝试使用敲除的style binding向某些div元素中添加CSS3 variables，然后在我们的CSS中使用这些元素来计算最终样式。

示例：

var viewModel = function ViewModel() {
  this.randomColor = ko.computed(function() {
    // Random color thanks to @paul_irish
    return "#" + Math.floor(Math.random() * 16777215).toString(16);
  });
}();

ko.applyBindings(viewModel);

h2 {
  /* default fall-back color: */
  --random-colour: #666;
  color: var(--random-colour);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h2 data-bind="style: {'--random-colour': randomColor}">This should receive a random text color.</h2>

http://jsfiddle.net/tujhxdmc/5/

我希望它在样式标签中应用css变量，但是似乎只是被忽略了。周围的绑定和使用标准CSS属性的绑定均按预期工作，因此我确定CSS变量存在问题。

Knockout's documentation状态：

如果要应用字体粗细样式或文本装饰样式，或其他名称不是合法JavaScript标识符的其他样式（例如，因为它包含连字符），则必须使用该样式的JavaScript名称。例如，


不要写{font-weight：someValue};确实要写{fontWeight：someValue}

但这不适用于CSS变量（必须以双连字符开头）。

如何在Knockout的样式绑定中使用CSS变量？

Answer 1

如果不增加Knockout，看来现在不可能实现。

现在在 knockout/src/binding/defaultBindings/style.js 的源代码中考虑样式绑定的当前操作方式。

特别是这一行：

 element.style[styleName] = styleValue;

每运行一次，styleName将是CSS变量"--random-colour"。

但是，您无法通过element.style["--random-colour"]设置样式。您必须经历style.setProperty()。

还要考虑以下问题：Accessing a CSS custom property (aka CSS variable) through JavaScript

如果您现在需要此功能，则可以加载敲除库脚本，然后覆盖ko.bindingHandlers['style'].update函数以使用将使用setProperty()的版本：

ko.bindingHandlers['style'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor() || {});
        ko.utils.objectForEach(value, function(styleName, styleValue) {
            styleValue = ko.utils.unwrapObservable(styleValue);

            if (styleValue === null || styleValue === undefined || styleValue === false) {
                // Empty string removes the value, whereas null/undefined have no effect
                styleValue = "";
            }

            if(styleName.substring(0, 2) === "--"){
                element.style.setProperty(styleName, styleValue);
            } else {
                element.style[styleName] = styleValue;
            }
        });
    }
};

我在KnockOut GitHub上添加了一个问题，以防其他更好的响应来自Cannot bind to custom CSS property variables #2400。

在淘汰样式绑定中使用CSS3变量

1 个答案: