当数据大于零时，如何更改数据的字体颜色？答案

【问题标题】：How can I change the font-color of a data when it is greater than zero?当数据大于零时，如何更改数据的字体颜色？
【发布时间】：2018-11-23 17:16:09
【问题描述】：

我想在数据大于零时更改数据的字体颜色。我尝试使用 javascript，但似乎我做错了。这是代码

<script>
    $(document).ready(function(){
             document.getElementsByTagName("h4").style.color = "#ff0000";
    });
</script>
<?php foreach($query as $row):  ?>
<h4 class = "pendingAmount">Pending Amount: ₱<?php echo $pending_total[$row->merge_id]; ?></h4><br>
<?php endforeach; ?>

【问题讨论】：

您要更改<h4> 中所有文本的颜色还是仅更改数字？你在用 jQuery 吗？
@azeós 我不知道如何使用 jquery。我想更改
标记内的整个文本。我正在运行 foreach 从数据库中获取所有数据

标签： javascript php html css

【解决方案1】：

var eArr = document.getElementsByClassName("demo")
for(i=0;i<eArr["length"];i++){
  if (eArr[i].innerHTML > 0)
    eArr[i].style.color = "#ff0000";
}

<h4 class="demo">3</h4>
<h4 class="demo">0</h4>
<h4 class="demo">-1</h4>
<h4 class="demo">50</h4>

【讨论】：

【解决方案2】：

比较在哪里？

document.getElementsByTagName("h4").style.color = "#ff0000";

错了！ document.getElementsByTagName 得到一个看起来像数组的对象，你应该使用 document.getElementsByTagName("h4")[index].style.color = "#ff0000";index 是一个数字。

你可以试试这个：

$('h4').each(function(){
   $(this).css({'color':'#ff0000'})
})

【讨论】：

【解决方案3】：

修改为只使用php实现：

<?php foreach($query as $row):  ?>
<h4 class="pendingAmount" <?php if($pending_total[$row->merge_id]>0) echo 'style="color:#ff0000"'; ?>>Pending Amount: ₱<?php echo $pending_total[$row->merge_id]; ?></h4><br>
<?php endforeach; ?>

【讨论】：

getElementsByTagName 返回一个HTMLCollection。

【解决方案4】：

无论有没有javascript，您都可以实现这一目标。

Javascript (jQuery)：

<script>
    $(document).ready(function () {
        $('.pendingAmount').each(function () {
            var amount = $(this).find('.amount').text();
            if (amount > 0) {
                $(this).css('color', '#f00');
            }
        });
    });
</script>

<?php foreach($query as $row): ?>
    <h4 class="pendingAmount">
        Pending Amount: ₱<span class="amount"><?php echo $pending_total[$row->merge_id]; ?></span>
    </h4>
    <br>
<?php endforeach; ?>

我在实际金额周围添加了一个<span class="amount"></span>。使用 javascript，我们遍历所有 .pendingAmount 元素并检查其中的 .amount 是否大于 0。如果是，我们更改颜色。

PHP 和 CSS：

<style>
    .greater { color: #f00; }
</style>

<?php foreach($query as $row): ?>
    <h4 class="pendingAmount<?php echo ($pending_total[$row->merge_id] > 0) ? ' greater' : '' ?>">
        Pending Amount: ₱<?php echo $pending_total[$row->merge_id]; ?>
    </h4>
    <br>
<?php endforeach; ?>

在这种方法中，我们将$pending_total[$row->merge_id] 是否大于0 直接与PHP 进行比较。如果是，我们将greater 类添加到<h4> 中，该类由CSS 设置样式。

【讨论】：

【解决方案5】：

我建议给你的 h4 一个 id，然后用它来修改样式，如下所示：

$(document).ready(function(){
  var count = 10;
    if(0 < count) {
      $('.pendingAmount').addClass('colored-pending-amount');
    }
});

<style>.colored-pending-amount{color: #ff0000;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h4 id="pendingAmount" class="pendingAmount">Pending Amount: 10
</h4><br>
</body>
</html>

jsfiddle：https://jsfiddle.net/0a4v23pg/7/

带有php的代码变成：

<style>.colored-pending-amount{color: #ff0000;}</style>
<script>
    $(document).ready(function(){
             var count = <?php echo $pending_total[$row->merge_id]; ?>;
             $('.pendingAmount').addClass('colored-pending-amount');
    });
</script>
<?php foreach($query as $row):  ?>
<h4 id="pendingAmount class="pendingAmount">Pending Amount: <?php echo $pending_total[$row->merge_id]; ?></h4><br>
<?php endforeach; ?>

我希望这会有所帮助。

【讨论】：

我试过这个。但是使用相同的 id 会使脚本混淆，它只会将第一个 h4 更改为 id=pendingAmount。我正在运行一个 foreach 并且不能使用它。
ID 是唯一的，多个相同的 ID 是错误的。
@Script47 没错。这就是为什么我使用类来识别
标签
@goaty 我已修改代码以通过 jquery 添加自定义类

标记内的整个文本。我正在运行 foreach 从数据库中获取所有数据

标签