根据其值改变颜色 [英] Changing the color based on its value

问题描述

我试图让启用cookies的值变成红色，如果为false或绿色，如果为true，但我只能够改变颜色，无论它是true还是false，是否有另一种解决方法使用JS？

或者，如果您想更进一步，是否可以在值后加入图像（红色X或绿色勾号）？

HTML

 < table class =table > 
< tr> 
< td> Cookies已启用：< / td> 
< td id =cookie>< / td> 
< / tr> 
< / table> 
  

JS

  var Cookies; {
 if（navigator.cookieEnabled）{
 Cookies =True; 
} else {
 Cookies =False; 
 
 
 window.onload = function（）{
 document.getElementById（cookie）。innerHTML = Cookies; 
 
  

解决方案

这应该很简单：

  window.onload = function（）{var cookieElem = document.getElementById（'cookie'）;如果（navigator.cookieEnabled）{cookieElem.classList.add（'green'）; cookieElem.innerHTML ='True'; } else {cookieElem.classList.add（'red'）; cookieElem.innerHTML ='False'; }}  

＃cookie.green {color：green;} ＃cookie.red {color：red;}

< table class =table> < TR> < td>启用Cookie：< / td> < td id =cookie>< / td> < / table>

I'm trying to get the value of cookies enabled to turn red if false or green if true but I've only been able to change the color regardless if it's true or false, is there another way around this using JS?

Or if you were to take it one step further, is it possible to put in an image (red X or green Tick) after the value?

HTML

<table class="table">
  <tr>
    <td>Cookies Enabled:</td>
    <td id="cookie"></td>
  </tr>
</table>

JS

var Cookies; {
  if (navigator.cookieEnabled) {
    Cookies = "True";
  } else {
    Cookies = "False";
  }
}
window.onload = function () {
 document.getElementById("cookie").innerHTML = Cookies;
}

解决方案

This should be simple enough:

window.onload = function() {
  var cookieElem = document.getElementById('cookie');

  if (navigator.cookieEnabled) {
    cookieElem.classList.add('green');
    cookieElem.innerHTML = 'True';
  } else {
    cookieElem.classList.add('red');
    cookieElem.innerHTML = 'False';
  }
}

#cookie.green {
  color: green;
}
#cookie.red {
  color: red;
}

<table class="table">
  <tr>
    <td>Cookies Enabled:</td>
    <td id="cookie"></td>
  </tr>
</table>

这篇关于根据其值改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！