Css Class and ID Style

In my case i have an styled alert which displays both success and error cases. By default the alert will have the id style as common alert (neither success nor failure). S开发者_JAVA百科o depending upon the validation with js i need to change the alert to use the style success class or failure class without letting that alert to use the style defined with id. Hope you understand my scenario.

you can do it with

document.getElementById('yourelementid').className='yourclassname';

if your using jQuery

$('#yourelementid').attr('class','yourclassname');

If this question is about style overriding, this might help:

#idOfElement {width: 100px;}
.classOfSameElement {width: 50px !important;}

The element will have the width of 50px.
when you place !important in the style declaration, it overrides every other style declaration for that element. In browsers other than IE6 and IE7, it even overrides inline styles.

I would suggest you use jQuery to implement this, it's fast and easy. So your styled alert has an id #thisId, and you would like to style it according to success or error.

I want to add to ajay_whiz's jQuery answer:

Firstly, make sure you overwrite the appropriate properties you want to change for the specific class (i.e. .success or .error), for example:

#thisId {
    border:black 1px solid;
}

.success {
    border:green 2px solid;
}

.error {
    border:red 2px solid;
}

Then you need to add the appropriate class to the element:

$(document).ready(function () {
    if (success) {
        $("#thisId").addClass("success"); // will not double add it
        $("#thisId").removeClass("error"); // will remove class if it was present before
    }

    if (error) {
        $("#thisId").addClass("error"); // will not double add it
        $("#thisId").removeClass("success"); // will remove class if it was present before
    }
});

Hope this helps.