Question

我想根据值为4种不同颜色的文字着色。值标度范围为0.0到10.0

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

如何使用javascript？

请注意控制器中的值。

＆＃13;

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

＆＃13;

如果我想使用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>

Css样式更改取决于值文本

2 个答案: