CSS样式更改取决于值文本

Question

我想根据值用4种不同的颜色为文本上色。 值的范围从0.0到10.0

例如：0.0到2.5红色，2.6到5.0黄色，5.1到7.5蓝色，7.6到10.0绿色。

如何使用JavaScript？

请注意，其中的值由控制器获取。

 <span th:text="${value}">1.0</span> 

如果我想使用th：classappend？

Answer 1

您可以在Pure Javascript中执行以下操作：

 document.getElementById("btn").onclick = foofunc; function foofunc(){ var number = document.getElementById("test").value; var div = document.getElementById("foo"); div.style.fontSize = "50px"; if (number >= 1 && number <= 2.5){ div.style.color = "Red"; } else if (number >= 2.6 && number <= 5.0){ div.style.color = "Yellow"; } else if (number >= 5.1 && number <= 7.5){ div.style.color = "Blue"; } else if (number >= 7.6 && number <= 10){ div.style.color = "Green"; } else{ div.style.color = "White"; } } 

 body { background-color: lightblue; } 

 <input type = "number" id = "test"> <button id = "btn"> change </button> <div id = "foo" >1.0</div> 

在输入框中插入值，单击“更改”，它将根据您的条件更改颜色。

Answer 2

我希望这能帮到您

<c:if test="${value < 2.5}">
<span th:text="${value}" style="color:red">1.0</span>
</c:if>
<c:if test="${value > 2.5 && value < 5.0}">
<span th:text="${value}" style="color:yellow">1.0</span>
</c:if>