jquery如何改变字体颜色答案

【问题标题】：how to change the font color in jqueryjquery如何改变字体颜色
【发布时间】：2016-02-09 12:13:23
【问题描述】：

我想改变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');  
            }  
    });

【问题讨论】：

你可以用 span 和 style 包裹它。
$('#username_availability_result').html(username + ' is already exist. Please try another one').css( "color", "red" ); api.jquery.com/css
你还没有回复任何答案

标签： php css codeigniter

【解决方案1】：

试试css -

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

【讨论】：

font-color 不是有效的 CSS 属性

【解决方案2】：

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

【讨论】：

【解决方案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>');
            }  
    });
}

【讨论】：

【解决方案4】：

你也可以使用jQuery attr：

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

【讨论】：

【解决方案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'
    });
                }  
        });

【讨论】：