I have a page message and I have a requirement that I want the text to be in red color.

I have written some javascript like this:

    <Script>
        window.onload=func1;
        function func1()       
        {    
            document.getElementById('{!$Component.msg2}').style.color = "#ff0000";
            alert('{!$Component.msg2}');
    	}  
    </Script>

and the page message is like 

    <apex:outputPanel id="errordisplayPanel" >
        <apex:outputPanel Id="errorspanel">
            <input id="isDiscountCheckPrfmd" type="hidden" name="isDiscountCheckPrfmd" value="{!isDiscountCheckPrfmd}" />
            <c:Displayerror id="errordisplay" errorList="{!lstAllError}"  />                         
            <br/>  
        </apex:outputPanel>
        <div id="focusError"></div>                    
        <apex:pageMessages id="msg2" />
    </apex:outputPanel> 


I don't know why its not working. But when I use the static id that I pick up using inspect element it's working.

It was like:

     document.getElementById("createSOheaderpage:newheaderform:newheaderpb:msg2:j_id63:j_id64:0:j_id65:j_id66:j_id68").style.color = "#ff0000";


Can someone please help me with this

Thanks in Advance