css - 根据该元素中的值将 css 分配给该元素

Question

我正在开发一个 web 应用程序，它作为一个表格，其中有几列，其中包含一些数据。特别是我有一个名为 Change 的列，下面绑定(bind)了一些数据

            <td data-bind="text: GradeName"></td>
            <td data-bind="text:Price"></td>
            <td data-bind="text:Change"></td>

Change 的值可以是负数或正数，但如果它是负数，我希望该值显示为红色或黑色。

我可以知道一个好的方法吗？

Answer 1

没有 CSS 选择器可以让您根据元素的内容来设置元素的样式，因此您无法仅在 CSS 中完成此操作。

但是，Knockout 可以在绑定(bind)数据时为您设置样式:您可以使用 css binding或 style binding .这是一个样式绑定(bind)示例:

<td data-bind="text: GradeName"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: Change, style: { color: Change<0 ? 'red' : 'black' }"></td>

现场演示:

ko.applyBindings({ GradeName:"grade", Price:"€100.0", Change:-10, OtherField:10 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tr>
  <td data-bind="text:GradeName"></td>
  <td data-bind="text:Price"></td>
  <td data-bind="text:Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
  <td data-bind="text:OtherField, style: { color: OtherField<0 ? 'red' : 'green' }"></td>
</tr></table>