HTML – 使用JS根据值更改文本的颜色

我正在用Django创建一个用HTML显示的表格。 我希望在数字为负时将数字的颜色更改为红色，并在数字为正时将数字的颜色更改为绿色。 我知道我需要使用JS，但我无法使其工作。 任何帮助将不胜感激 ！！

这是我的Django HTML模板：

{% load static %}  
 
{{ Transaction.TransactionDateTime }}
 
  var el = document.getElementById('TransactionAmount'); if(el<0) { el.addClass += "red"; } else { el.addClass += "green"; }  
 
 
TRANSACTION AMOUNT
 
BALANCE AFTER TRANSACTION
 
TRANSACTION COMMENT
 
 
{{ Transaction.TransactionAmount }}
 
{{ Transaction.BalanceAfterTransaction }}
 
{{ Transaction.TransactionComment }}
 
 
Feel free to contact me !
  

我在CSS中创建的类：

 .red { color:#FF0000; } .green { color:#33FF3C; } 

我尝试从我在网络上找到的例子中创建一些JS代码但是肯定有些错误。 我的目标是检查TransactionAmount数字是负数还是正数，并相应地调整颜色。 我使TransactionAmount div能够与getElementById一起使用…

  var el = document.getElementById('TransactionAmount'); if(el<0) { el.addClass += "red"; } else { el.addClass += "green"; }  

我的号码仍然是灰色的….

Answer 1

您需要获取textContent来测试它的值。 你可以使用一个单独的类来切换它是否正面。 并使用jquery的$.addClass()和$.removeClass()或javascript的classList.add()和classList.remove() 。

正如Sujen K.所指出的那样，你对这个元素有一个tr > div > td ，它应该是tr > td > div 。

 var els = document.getElementsByClassName('TransactionAmount'); for (var i = 0; i < els.length; i++) { var cell = els[i]; if (cell.textContent < 0) { cell.classList.remove('green') } else { cell.classList.add('green'); } } 

 .TransactionAmount { color: #FF0000; } .TransactionAmount.green { color: #33FF3C; } 

 
 
 
TRANSACTION AMOUNT
 
BALANCE AFTER TRANSACTION
 
TRANSACTION COMMENT
 
 
 
-1
 
{{ Transaction.BalanceAfterTransaction }}
 
{{ Transaction.TransactionComment }}
 
 
 
0
 
{{ Transaction.BalanceAfterTransaction }}
 
{{ Transaction.TransactionComment }}
 
 
 
1
 
{{ Transaction.BalanceAfterTransaction }}
 
{{ Transaction.TransactionComment }}
 
  

Answer 2

有两个问题。 HTML层次结构应该是table> tr> td ，并且你放置div> td 。 第二个问题是addClass。 这是来自jQuery库，如果你想使用普通的JS它可能与className。 试试这个：

 
 
{{ Transaction.TransactionDateTime }}
 
 
 
TRANSACTION AMOUNT
 
BALANCE AFTER TRANSACTION
 
TRANSACTION COMMENT
 
 
{{ Transaction.TransactionAmount }}
 
{{ Transaction.BalanceAfterTransaction }}
 
{{ Transaction.TransactionComment }}
  
 
 
Feel free to contact me !