如何在Aurelia项目中基于td元素文本值动态修改字体颜色

解决方案 #

你现在用的是Aurelia框架，不需要额外写原生DOM操作的脚本，直接用框架自带的样式绑定能力即可实现需求，两步就能完成：

1. 删除people-list.html底部那段冗余的<script>标签，这段代码无法适配循环生成的多行数据，且重复使用相同id不符合HTML规范，完全没有作用。
2. 替换表格<tr>里对应三个列的<td>代码，通过style.color.bind绑定动态颜色：

<tr repeat.for="person of people" person.bind="person">
  <td><a class="is-link" href="/people/${person.id}">${person.fullName}</a></td>
  <td style.color.bind="person.palindrome ? 'green' : 'red'">${person.palindrome ? 'Yes' : 'No' }</td>
  <td style.color.bind="person.authorised ? 'green' : 'red'">${person.authorised ? 'Yes' : 'No'}</td>
  <td style.color.bind="person.enabled ? 'green' : 'red'">${person.enabled ? 'Yes' : 'No'}</td>
  <td>${person.colours | colourNames }</td>
</tr>

如果想要更规范的可维护写法，可以预先定义两个CSS类，再绑定类名：

/* 可以加在全局样式或者当前页的样式块里 */
.text-green { color: green; }
.text-red { color: red; }

然后<td>改成类绑定的写法：

<td class.bind="person.palindrome ? 'text-green' : 'text-red'">${person.palindrome ? 'Yes' : 'No' }</td>

两种写法都可以实现效果，不需要修改任何TS代码。

内容的提问来源于stack exchange，提问作者John Doe