如何在jQuery中更改字體顏色

Question

我想更改html(username + ' is already exist. Please try another one');的字體顏色html(username + ' is already exist. Please try another one'); 但我不知道該如何改變。

function check_availability(){  

    //get the username  
    var username = $('#username').val();  

    //use ajax to run the check  
    $.post("<?php echo base_url();?>loginFunction/checkUsername", { username: username },  
        function(result){  
            //if the result is 1  
            if(result == 1){  
                //show that the username is available  
                $('#username_availability_result').html(username + ' is Available');  
            }else{  
                //show that the username is NOT available  
                $('#username_availability_result').html(username + ' is already exist. Please try another one');  
            }  
    });

Answer 1

嘗試使用css

$('#username_availability_result')
.css('color', 'red')
.html(username + ' is already exist. Please try another one');

Answer 2

<script>
$('#username_availability_result').css("color","red");
<script>

Answer 3

您可以將其包裝在span標簽中。

function check_availability(){  

    //get the username  
    var username = $('#username').val();  

    //use ajax to run the check  
    $.post("<?php echo base_url();?>loginFunction/checkUsername", { username: username },  
        function(result){  
            //if the result is 1  
            if(result == 1){  
                //show that the username is available  
                $('#username_availability_result').html(username + ' is Available');  
            }else{  
                //show that the username is NOT available  
                $('#username_availability_result').html('<span style="color:#f00;">' + username + ' is already exist. Please try another one</span>');
            }  
    });
}

Answer 4

您也可以使用jQuery attr ：

$('#username_availability_result').attr('style','color:red');
$('#username_availability_result').html(username + ' is already exist. Please try another one');  

Answer 5

嘗試這個

 function check_availability(){  

        //get the username  
        var username = $('#username').val();  

        //use ajax to run the check  
        $.post("<?php echo base_url();?>loginFunction/checkUsername", { username: username },  
            function(result){  
                //if the result is 1  
                if(result == 1){  
                    //show that the username is available  
                    $('#username_availability_result').html(username + ' is Available');  

    $('#username_availability_result').css({
      'color': 'black'
    });
                }else{  
                    //show that the username is NOT available  
                    $('#username_availability_result').html(username + ' is already exist. Please try another one');  

    $('#username_availability_result').css({
      'color': 'red'
    });
                }  
        });