Question

I would like to display a status message in javascript and would like to include some css to that staus message.Can anyone help me out with this?

Now I have two css classes named Available and Not available for the available I need to apply the Available css class and for not available I need to append the NotAvailable css class.

Here is my javascript code:

   function OnSuccess(response) {
        var mesg = $("#mesg")[0];

        switch (response.d) {
            case "true":
                mesg.style.color = "green";
                mesg.innerHTML = "Available";
                break;
            case "false":
                //                    mesg.style.color = "red";
                mesg.innerHTML = "Not Available";
                break;
            case "error":
                //                    mesg.style.color = "red";
                mesg.innerHTML = "Error occured";
                break;
        }
    }
    function OnChange(txt) {
        $("#mesg")[0].innerHTML = "";

    }

This is my Css:

    .Available
            {
                position: absolute;
                width: auto;
                margin-left: 30px;
                border: 1px solid #349534;
                background: #C9FFCA;
                padding: 3px;
                font-weight: bold;
                color: #008000;
            }

    .NotAvailable
{
     position:absolute;
     width:auto;
     margin-left:30px;
     border:1px solid #CC0000;
     background:#F7CBCA;
     padding:3px;
     font-weight:bold;
     color:#CC0000;
    }

Answer 1

mesg.addClass('Available');
mesg.removeClass('NotAvailable');

and vice versa.