如何使用 JavaScript 更改字符串字体颜色

How to change string font color using JavaScript

本文关键字：字符串 字体 颜色 何使用 JavaScript      更新时间：2023-09-26

编辑：我正在为我的公司创建一个仪表板，显示我们所有的最新项目。我是应用程序开发团队的实习生。仪表板显示项目的名称及其最新版本，以及这些生成的状态。

我正在使用在成功、失败、错误和未知之间切换的动态字符串。这些字符串使用 td class="status" 显示在 HTML 中。状态可能会根据项目生成是失败还是成功而更改。成功应该是绿色的，失败应该是红色的，所有其他的都应该是黑色的。我有一个创建表的 for 循环。

我正在尝试使用 switch 语句使用 javascript 的函数 .fontcolor（） 根据字符串的内容更改字体颜色。字符串正在从状态状态中提取

目前，屏幕上的所有内容都正确显示，但字体颜色实际上并没有改变。我也没有收到任何错误。

for (var i in buildstatuses) {
                var status = buildstatuses[i];

                switch (status.status) {
                    case "SUCCESS":
                        status.status.fontcolor("green")
                        break;
                    case "FAILURE":
                        status.status.fontcolor("red")
                        break;
                    default:
                        status.status.fontcolor("black")
                        break;
                }
                $("tr#" + status.id + " td.status").html(status.status)
                if (status.status != "SUCCESS") {
                    var row = $("tr#" + status.id)

                           row.parent().parent().parent().parent().parent().removeClass("dashboard-success").addClass("dashboard-fail");
                    row.parent().parent().prepend(row.clone());  // Places Failure at the top by cloning then removing
                    row.remove();
                }
                $("tr#" + status.id + " td.date").html(status.date)
                console.log(status.id);
            }

我认为您只想内联更改css颜色：

var statusColor = 'black';
switch (status.status) {
  case "SUCCESS":
    statusColor = "green";
    break;
  case "FAILURE":
    statusColor = "red";
    break;
  default:
    statusColor = "black";
    break;
 }
 $("tr#" + status.id + " td.status").html(status.status).css('color', statusColor);

我会把它移到一个小函数上

function ChangeColor(result)
{
    var item=$(".status");
    if(result=="SUCCESS")
        item.css("color","green");
    if(result=="FAILURE")
        item.css("color","red");    
}

你可以这样称呼它

ChangeColor("FAILURE");

或 

ChangeColor("SUCCESS");

所以在你的代码中，

for (var i in buildstatuses) {
    var status = buildstatuses[i];
    ChangeColor(status.status);
   //your remaining code to do whatver you want after changing the color
}

样品 ： http://jsfiddle.net/gVV3U/3/

您没有在 HTML 中使用颜色。

改变 

$("tr#" + status.id + " td.status").html(status.status)

自

$("tr#" + status.id + " td.status")
        .html(status.status) // set text
        .css({color: status.status.fontcolor}); // set color
你可以

使用 JavaScript style 函数来做到这一点： EX：

document.getElementById('yourId').style.color = 'red';

或者使用 jquery：

 $('#yourid').css('color','red');
相关文章：