Resolving an embedded Control ID in JavaScript

One of the great things about ASP.NET is that you have the ability to incorporate things like MasterPages, UserControls, and WebParts in your pages. Unfortunately, if you ever decide to do some client-side scripting for validation, AJAX, or any other reason, it becomes very cumbersome if you have to retrieve a given control's id. The old document.getElementById syntax isn't going to cut it. Fortunately, you can embed some handy ASP.NET rendering code syntax in your JavaScript to do the trick. Here's a simple example:

<asp:button id="ClickMe" runat="server" onmouseover="javascript:toggleMyControlColor();" onmouseout="javascript:toggleMyControlColor();" Text="Click Me" / >

function toggleMyControlColor()
{
    var myControl = $get('<%= ClickMe.ClientID %>');
    if(myControl.styles.backgroundColor == 'red')
    {
        myControl.styles.backgroundColor = 'blue'
        }
    else
    {
        myControl.styles.backgroundColor = 'red'
    }
}

I have used this technique in MasterPages, UserControls, and WebParts (including those hosted in SharePoint), and it works like a charm.