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

Posted 2023-02-24

【中文标题】HTML - 使用 JS 根据值更改文本颜色

【英文标题】：HTML - Change color of text depending on value with JS

【发布时间】：2017-08-01 11:03:29

【问题描述】：

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

这是我的 Django HTML 模板：

% 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>

还有我在 CSS 中创建的类：

.red 
    color:#FF0000;


.green 
    color:#33FF3C;

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

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

我的号码还是灰色的....

【问题讨论】：

addClass 是一个函数，而不是一个列表。试试addClass("classname")。

试过了，但数字仍然是灰色的...谢谢 :)

【参考方案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;

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

【讨论】：

我可以看到 sn-p 工作，但是当我使用您的代码时，我的网页上的文本颜色仍然不会改变......也许这与我将 JS 脚本放在我的位置有关HTML...

@TajRaba 您需要向我们提供进行此更改所需的所有信息。根据您提供的代码，我给了您一个可行的解决方案。如果这不起作用，那么您可以提出一个更好的问题，并包含重现您尝试解决的问题的行为所需的所有代码。否则，我只会猜测它为什么不能在您的网站上运行，这是浪费您和我的时间。

您好，Micheal，感谢您的帮助。 Sujen K 发现了另一个问题：这是一个 HTML 层次结构问题，导致您的解决方案无法在我的网页中正确应用（您可以参考他的帖子）。

@TajRaba 太棒了！我只是用你原来的 HTML 试了一下，你是对的，它不起作用。抱歉，我应该先尝试一下，而不是告诉您您没有向我们提供重现问题所需的所有代码。使用完整/更正的 HTML 更新我的答案。

最后，它不起作用...您的代码只是更改了我列表中的第一个值，起初它似乎是正确的，但在向我的表中添加更多值时却不是。看起来我们没有使用正确的值进行比较 (el.textContent > 0)

【参考方案2】：

有两个问题。 HTML 层次结构应该是 table > tr > td，然后你放 div > td。第二个问题是addClass。这来自 jQuery 库，如果您想使用纯 JS，可以使用 className。试试这个：

<div id="container">
<h1> Transaction.TransactionDateTime </h1>
<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 id="TransactionAmount"> Transaction.TransactionAmount </div></td>
    <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.className += "red";
         else 
            el.className += "green";
        
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>

【讨论】：

你好 Sujen，非常感谢你解决了一半的问题。一旦我解决了 HTML 层次结构问题，Micheal 的解决方案就奏效了。