javascript - Css 样式根据值文本更改

Question

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

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

如何使用 javascript？

请注意 中的值会被 Controller 获取。

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

如果我想使用 th: classappend？

Answer 1

你可以在纯 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>

在输入框中插入值，点击更改，它会根据你的条件改变颜色。