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

Answer 2

if-else语句在JavaScript中很简单！首先，您需要提供您想要更改id的任何元素，让我们为此示例提供changeColour。

if (document.getElementById("changeColour").innerHTML == "red") {
    document.getElementById("changeColour").style.backgroundColor = "red";
} else if (document.getElementById("changeColour").innerHTML == "blue") {
    document.getElementById("changeColour").style.backgroundColor = "blue";

此格式也可以根据元素内部的值轻松更改，例如：

if (document.getElementById("changeColour").innerHTML > 20 && 
document.getElementById("changeColour").innerHTML < 60) {
    document.getElementById("changeColour").style.backgroundColor = "orange";
}

我希望这有帮助，如果你需要更多关于js语法和布局的帮助，请尝试查看if-else stataments并使用JavaScript来操作DOM。 W3C有很多很好的例子。

Answer 3

一种简单的方法可能是 HTML

<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>

Jquery
var content = $(".content p").text();

    if (content == "high") {

        $(this).css("color", "#ffffff");
    }
   if (content == "low") {

        $(this).css("color", "#ccc");
    }
   if (content == "critical") {

        $(this).css("color", "#000");
    }

使用css根据数值着色文本

3 个答案:

CSS

HTML

JS