javascript - CSS 和 if 条件在 javascript 中

Question

if(smaxResult<sigma){
    document.getElementById('smaxResult').innerHTML = "Max strain is: " + smaxResult + "<σ(επ)  text1";
} else{
    document.getElementById('smaxResult').innerHTML = "Max strain is: " + smaxResult + ">σ(επ)  text2";
}

您好!我有这种情况，我想要 (smaxResult < sigma)发生 <σ(επ) text1变成绿色否则>σ(επ) text2变成红色(我的意思是字体的颜色)。

有什么建议吗？ 谢谢。

Answer 1

创建red和green两个类，将要着色的文本用span包裹起来，然后根据条件给这个span添加class :

var elem = document.getElementById('smaxResult');

if(smaxResult<sigma){
    elem.innerHTML = "Max strain is: " + smaxResult + "<σ(επ)  text1";
    elem.classList.add("green");
} else{
    elem.innerHTML = "Max strain is: " + smaxResult + ">σ(επ)  text2";
    elem.classList.add("red");
}

CSS:

.red{
    color: red;
}

.green{
    color: green;
}

希望这对您有所帮助。

var elem = document.getElementById('smaxResult');

var elem = document.getElementById('smaxResult');
var smaxResult = 5;
var sigma = 20;

if(smaxResult<sigma){
  elem.innerHTML = "Max strain is: " + smaxResult + " <span><σ(επ)  text1</span>";
  elem.querySelector('span').classList.add("green");
} else{
  elem.innerHTML = "Max strain is: " + smaxResult + " <span>>σ(επ)  text2</span>";
  elem.querySelector('span').classList.add("red");
}

.red{
    color: red;
}

.green{
    color: green;
}

<span id="smaxResult">Some text for test</span>