html - 使用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?但这还不够，因为我有太多的值无法应用颜色。 此外，我希望它在将来添加新值时更易于维护。

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'
 };

Here is the working fiddle