Html css将颜色调整为值

我得到了以下跨度：

<span><b class="colored">' + this.my.points_gp + '</b></span>

this.my.points_gp的值可以介于-12和80之间。 现在我需要定义有色类。我需要的是将this.my.points\u gp的颜色与它的值结合起来

如果是-12，它一定是非常红的。 如果为0，则必须为橙色。 如果是20，则必须是浅绿色。 如果是80，一定是超绿色的。 问题是范围之间的值应该有不同的颜色代码。我的意思是，70一定比40绿色，一定是绿色，但更轻-6必须是一个介于红色和橙色之间的中间层，因为它在红色和橙色的中间12和橙色0等等…

我会尝试更好地解释自己：我需要92种不同的颜色，并根据我给出的基本颜色逐步分配它们。对不起，我的英语不是我的母语

---

我不知道这是否可能。。。可能是javascript，而不是普通css？

是的，唯一可能的方法是使用javascript或PHP代码，假设您使用的是PHP代码

以下是JavaScript的一条线索：

document.getElementsByClassName("colored")[1].style.color = "red";

---

希望这有帮助

你的问题缺乏信息。。希望您需要以下一个：

if( this.my.points_gp >= -12 && this.my.points_gp < 0 ) {
    <span class="very_red skiptranslate"><b>' + this.my.points_gp + '</b></span>
}
else if( this.my.points_gp >= 0 && this.my.points_gp < 20 ) {
   <span class="orange skiptranslate"><b>' + this.my.points_gp + '</b></span>
}
else if( this.my.points_gp >= 20 && this.my.points_gp < 80 ) {
   <span class="light_green skiptranslate"><b>' + this.my.points_gp + '</b></span>
}
else {
   <span class="super_green skiptranslate"><b>' + this.my.points_gp + '</b></span>
}

---

我会在span中添加一个ID，删除标记，并用font-weight:bold替换它，这样：

.colored{
    font-weight:bold;
    //other rules you may have
}

<span id="myId" class="colored">' + this.my.points_gp + '</span>

然后使用javascript添加一个类来更改颜色：

if( this.my.points_gp >= -12 && this.my.points_gp < 0 ) {
    document.getElementById("myId")[1].style.color = "red";
}
else if( this.my.points_gp >= 0 && this.my.points_gp < 20 ) {
   document.getElementById("myId")[1].style.color = "orange";
}
else if( this.my.points_gp >= 20 && this.my.points_gp < 80 ) {
   document.getElementById("myId")[1].style.color = "lightgreen";
}
else {
   document.getElementById("myId")[1].style.color = "darkgreen";
}

您可以调用传递值v的colorize函数，它为不同的v值设置变量R、G、B以及适当的红、绿、蓝值。然后使用css选择器更改如果这个选择器不起作用，您可以尝试jQuery，这会更容易地更改所选元素的文本或背景颜色

function colorize(v){
    // v is the value passed, range = [-12, 80]
    var R = 0, G = 0, B = 0;
    if (v <= 0){
        low = -12, high = 0;
        R = 255;
        G = 0 + Math.floor((150 - 0)*(v - low)/(high - low));
        B = 0;
    }
    else if (v >= 20){
        low = 20, high = 80;
        R = 150 - Math.floor((150 - 0)*(v - low)/(high - low));
        G = 255;
        B = 0;
    }
    else {
        low = 0, high = 20;
        mid = (low+high)/2;
        if (v < mid) {
            R = 255;
            G = 150 + Math.floor((255 - 150)*(v - low)/(mid - low));
        }
        else {
            R = 255 - Math.floor((255 - 150)*(v - mid)/(high - mid));
            G = 255;
        }
        B = 0;
    }
    color = 'rgb(' + R + ',' + G + ',' + B + ')';
    // if you want to change text color
    document.querySelector("span b.colored").style.color = color;
    // or if you want to change background color
    //document.querySelector("span b.colored").style.backgroundColor = color;
}

---

p、 s：最初是用python编写的，所以如果有不平衡的大括号，请检查是否有错误。

什么是skiptranslate？它是类还是id？别介意，我编辑了代码并删除了它你需要这样吗？是的，像那样的！！检查我的答案。您可以更改范围以调整颜色。对于值10，它生成纯黄色。对于-12:红色，0:橙色，20:浅绿色，80:纯绿色。此代码仅显示4种颜色，我需要显示92种不同的颜色，在范围内逐渐调整th颜色