大于零的数据如何更改字体颜色？
[英]How can I change the font-color of a data when it is greater than zero?
问题描述
I want to change the font-color of a data when it is greater than zero. 
我想更改大于零的数据的字体颜色。 I tried using javascript but it seems like Im doing it wrong. 我尝试使用JavaScript，但似乎我做错了。 Here's the code 这是代码
<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; ?>
5 个解决方案
解决方案1
0 2018-06-14 02:39:02
Modified that use only php to achieve: 修改后只使用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; ?>
解决方案2
0 2018-06-14 02:48:00
Where is the comparing? 比较在哪里？
document.getElementsByTagName("h4").style.color = "#ff0000";
it's wrong! 这是不对的！ document.getElementsByTagName get a object looks like a Array,you should use document.getElementsByTagName("h4")[index].style.color = "#ff0000"; document.getElementsByTagName获取看起来像数组的对象，应使用document.getElementsByTagName("h4")[index].style.color = "#ff0000"; index is a number. 索引是一个数字。
you can try this: 您可以尝试以下方法：
$('h4').each(function(){
$(this).css({'color':'#ff0000'})
})
解决方案3
0 2018-06-14 02:54:57
I would suggest giving your h4 an id and then using it to modify the style like this: 我建议给您的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/ jsfiddle： https ://jsfiddle.net/0a4v23pg/7/
The code with php becomes: 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; ?>
I hope this helps. 我希望这有帮助。
解决方案4
0 2018-06-14 02:55:32
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>
解决方案5
0 2018-06-14 03:26:51
You can achieve this with or without javascript . 您可以使用javascript也可以不使用javascript 。
Javascript (jQuery): 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; ?>
I added a <span class="amount"></span> surrounding the actual amount. 我在实际金额周围添加了<span class="amount"></span> 。 With javascript we loop through all .pendingAmount elements and check if the .amount inside it is greater than 0. If it is, we change the color. 使用javascript，我们遍历所有.pendingAmount元素，并检查其中的.amount是否大于0。如果是，则更改颜色。
PHP & CSS: 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; ?>
In this approach we compare if $pending_total[$row->merge_id] is greater than 0 directly with PHP . 在这种方法中，我们比较，如果$pending_total[$row->merge_id]大于0直接与PHP 。 If it is, we add the greater class to the <h4> which gets styled by CSS . 如果是这样，我们将greater类添加到<h4> ，该类由CSS 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.