javascript changing .text font color

Question

Is there any way to change the font color of individual .texts in JavaScript? Depending on a user input 1 of a few options could happen and I would like to change the color depending on the selection. Note CSS can change the color for the <td> but not change depending on a selection.

var latedifference = 0;
    latedifference += late-lates
     if (late > lates && latedifference <= 2){
        $('#lateedge').text('Your Team has the Edge');
    }else if (late > lates && latedifference > 2){
        $('#lateedge').text('Your Team has a Big Edge');   
    }else if (lates > late && latedifference < -2){
        $('#lateedge').text('Opposing Team has a Big Edge');   
    }else if (lates === late){
        $('#lateedge').text('Teams are Even');
    }else {
        $('#lateedge').text('Opposing Team has the Edge');
    }

Answer 1

在.text('Your message')添加.css('color', '<your color>')

Answer 2

You can change the font color in the same statement where you change the text, either by changing it directly or changing a css class:

if (late > lates && latedifference <= 2){
    $('#lateedge').text('Your Team has the Edge');
    $('#lateedge').css('color', 'blue');
}else if (late > lates && latedifference > 2){
    $('#lateedge').text('Your Team has a Big Edge');  
    $('#lateedge').css('color', 'green')

    // or, if you have css to go with it
    // like .big-edge { color: green; }

   $('#lateedge').toggleClass('big-edge')
[etc.]

Another thing - it's bad for performance to keep querying $('#lateedge') over and over; instead, cache it at the beginning so jQuery only has to look for that selector once.

var latedifference = 0;
var $td = $('#lateedge');

...
$td.text('Teams are Even')