如何使用JavaScript更改字符串字體顏色

編輯：我正在爲我公司創建一個顯示所有我們最新項目的儀表板。我是應用程序開發團隊的實習生。儀表板顯示項目名稱及其最新版本以及這些版本的狀態。如何使用JavaScript更改字符串字體顏色

我正在使用一個在成功，失敗，錯誤和UNKNOWN之間變化的動態字符串。這些字符串使用td class =「status」以HTML格式顯示。狀態可以根據項目構建是失敗還是成功進行更改。 SUCCESS應該是綠色的，FAILURE應該是紅色的，其他的都應該是黑色的。我有一個for循環創建表。

我在使用javascript的函數.fontcolor（）基於字符串的內容嘗試使用switch語句更改字體顏色。字符串正在從狀態中拉出。狀態

此刻，所有內容都正確顯示在屏幕上，但字體顏色實際上並未發生變化。我也沒有得到任何錯誤。

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

來源

2012-05-08 LemonFlip

之前beimg能夠理解這...什麼是「status.status」或「狀態「對於這個問題？什麼是一切？ ...我會嘗試回答它。好吧，Gaby更快，正是我想回答的：D – sinni800

您可以使用JavaScript'style'功能來做到這一點： EX： document.getElementById（'yourId'）。style.color ='red'; （'＃yourid'）。css（'color'，'red'） – Vimalnath

我將更詳細地編輯。 – LemonFlip

我覺得你只是想更改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);

來源

2012-05-08 13:30:49 JoshNaro

是的！這很好，非常感謝你。我會盡快檢查這個答案。 – LemonFlip

你沒有使用你的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

來源

2012-05-08 13:27:01

你可以做它使用JavaScript style功能：EX：

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

或使用jQuery：

$('#yourid').css('color','red');

來源

2012-05-08 13:29:48 Vimalnath

由於項目設置的方式，所有狀態只有一個類（td class =「status」），所以更改css顏色將會將所有狀態更改爲一種顏色。 – LemonFlip

我將其移至一個小功能

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/

來源

2012-05-08 13:32:12 Shyju

如何使用JavaScript更改字符串字體顏色

回答

相關問題