HTML - 根据JS的值更改文本的颜色 [英] HTML - Change color of text depending on value with JS

问题描述

我正在使用Django创建一个以HTML格式显示的表格。当数字为负数时，我想将数字的颜色更改为红色，当数字为正时，我将其更改为绿色。我知道我需要使用JS，但我无法使其工作。任何帮助将非常感谢!!

这是我的Django HTML模板：

  {％load static％} 
 
< link rel =stylesheettype =text / csshref ={％static'WalletJournal / style.css'％}/ > 
 
< div id =container> 
< h1> {{Transaction.TransactionDateTime}}< / h1> 
< table> 
< tr> 
< TRANSACTION AMOUNT< / th> 
<事务之后的平衡< / th> 
< TRACTION COMMENT< / th> 
< / tr>< tr> 
< div id =TransactionAmount>< td style =font-family：'Arial'，serif; font-size：10pt> {{Transaction.TransactionAmount}}< / td> < / DIV> 
< td style =font-family：'Arial'，serif; font-size：10pt> {{Transaction.BalanceAfterTransaction}}< / td> 
< td style =color：white> {{Transaction.TransactionComment}}< / td> 
< script> 
 var el = document.getElementById（'TransactionAmount'）; 
 if（el< 0）{
 el.addClass + =red; 
} else {
 el.addClass + =green; 
} 
< / script> 
< / tr> 
< / table> 
< h2>随时与我联系！< / h2> 
< / div> 
  

我在CSS中创建的类：

  .red {
 color：＃FF0000; 
} 
 
 .green {
颜色：＃33FF3C; 
} 
  

我尝试从网络上发现的示例创建一些JS代码，但必须是错的。我的目标是检查数字TransactionAmount是负数还是正数，并相应地调整颜色。我使TransactionAmount div能够使用getElementById ...

 < script> 
 var el = document.getElementById（'TransactionAmount'）; 
 if（el< 0）{
 el.addClass + =red; 
} else {
 el.addClass + =green; 
} 
< / script> 
  

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

解决方案

您需要获取元素的 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;}  

 表> < TR> < th> TRANSACTION AMOUNT< / th>交易之后的平衡< / th> < th>事务评论< / th> < / TR> < TR> < td style =font-family：'Arial'，serif; font-size：10pt>< div class =TransactionAmount> -1< / div>< / td> < td style =font-family：'Arial'，serif; font-size：10pt> {{Transaction.BalanceAfterTransaction}}< / td> < td style =color：white> {{Transaction.TransactionComment}}< / td> < / TR> < TR> < td style =font-family：'Arial'，serif; font-size：10pt>< div class =TransactionAmount> 0< / div>< / td> < td style =font-family：'Arial'，serif; font-size：10pt> {{Transaction.BalanceAfterTransaction}}< / td> < td style =color：white> {{Transaction.TransactionComment}}< / td> < / TR> < TR> < td style =font-family：'Arial'，serif; font-size：10pt>< div class =TransactionAmount> 1< / div>< / td> < td style =font-family：'Arial'，serif; font-size：10pt> {{Transaction.BalanceAfterTransaction}}< / td> < td style =color：white> {{Transaction.TransactionComment}}< / td> < / tr>< / table>  

I'm creating a table displayed in HTML with Django. I want to change the number's color to red when the number is negative, and to green when the number is positive. I know I need to use JS for this but I could not make it work. Any help will be greatly appreciated !!

Here is my Django HTML template :

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" />

<div id="container">
<h1>{{ Transaction.TransactionDateTime }}</h1>
<table>
    <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>    
    </tr><tr>
    <div id="TransactionAmount"><td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.TransactionAmount }}</td></div>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
    <script>
        var el = document.getElementById('TransactionAmount');
        if(el<0) {
            el.addClass += "red";
        } else {
            el.addClass += "green";
        }
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>
</div>

And the classes I created in my CSS :

.red {
    color:#FF0000;
}

.green {
    color:#33FF3C;
}

I tried creating some JS code from examples I found around the web but something must be wrong. My goal is to check if the number TransactionAmount is negative or positive, and adjust the color accordingly. I made the TransactionAmount div to be able to use it with getElementById...

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

And my number is still gray....

解决方案

You need to get the textContent of the element to test it's value. And you can use a single class that toggles if it's positive or not. And either use jquery's $.addClass() and $.removeClass() or javascript's classList.add() and classList.remove().

Also as Sujen K. pointed out, you have a tr > div > td for this element, and it should be tr > td > div instead.

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;
}

<table>
  <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">-1</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">0</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">1</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
</table>

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