使用css根据数值为文本着色

Question

我想使用 css 根据其值为文本着色。

 ie. if value is less than 20 --> red ,
    if value is between 20 - 60 --> orange ,
    if value is greater than 60 to 100--> green.

我不想根据值在模板中添加任何类。

我找到了这个链接： How do I change the background color with JavaScript? 但这还不够，因为我有太多的值无法应用颜色。此外，我希望它在将来添加新值时更易于维护。

原文由 anandharshan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅使用 CSS 是 不可能的。

您必须使用 JavaScript/jQuery 动态添加颜色，基于 object 颜色匹配，并测试 data-color HTML 属性中的值是否在每个元素的范围之间。

JS 代码动态检查元素属性是否在颜色范围内并应用匹配的颜色。

如果您将来必须添加一些颜色和范围，只需在 colorMatch 哈希中 添加新值，并更新您的 CSS 颜色类列表。

##CSS

 .red {color:red}

###HTML

 <p data-color="19">Lorem 19</p>

###JS

 var colorMatch = {
    '0-19'     : 'red',
    '20-59'    : 'orange',
    '60-100'   : 'green'
 };

这是工作小提琴

原文由 Giacomo Paita 发布，翻译遵循 CC BY-SA 4.0 许可协议