Question

我有以下范围：

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

this.my.points_gp可以是-12到80之间的值。现在我需要定义“彩色”类。我需要的是考虑其值this.my.points_gp的颜色。

如果-12必须非常红。
如果为0，则必须为橙色。
如果它的20必须是浅绿色。
如果它的80必须是超级绿色。

问题是范围之间的值应该有不同的颜色代码。我的意思是，70必须比40更绿，必须是绿色但更轻。 -6必须是红色和橙色之间的中间因素，因为它位于红色（-12）和橙色（0）的中间，依此类推......

我会尝试更好地解释自己：我需要92种不同的颜色并逐渐考虑我给出的基色。对不起我的英语，这不是我的母语。

我不知道这是否可能......可能是在javascript而不是普通的CSS？

Answer 1

您可以调用函数colorize()传递值v，并将变量R，G，B设置为适当的红绿蓝值对于v的不同值。然后使用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中写的，所以如果有错误，请检查不平衡的大括号。

Answer 2

是的，可能的唯一方法是使用JavaScript或PHP代码（假设您使用PHP进行编码）。

以下是JavaScript的线索：

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

希望这有帮助;）

Answer 3

你的问题缺乏信息..希望你需要下面的一个：

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

Answer 4

我会在跨度中添加一个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";
}

css将颜色调整为值

4 个答案: