How to access asp:Image from Javascript?

Question

I got an asp:Image in my server-markup like this:

<asp:Image ID="Img1" runat="server"/>

Now, I want to find this img in my javascript, but seem to run into the problem of ASP.Net obfuscating my names. The client-markup will look something like this:

<img id="ctl00_Content_Img1"/>

I imagine this is because everything is inside a form-element called 'Content', which is quite normal I guess? :)

Any pointers on how to access this from javascript?

[EDIT] I was thinking if there's an easy way to change my javascript "servertime" to search for the obfuscated id ?

Answer 1

Here you can get a server control's client side id by using it's ClientID property like that :

<script>
var imgID = '<%= Img1.ClientID %>';
var imgObject = document.getElementById(imgID);
</script>

Answer 2

You can obtain a client reference of the Id generated on the server-side with the ClientID property:

var img1 = document.getElementById('<%= Img1.ClientID %>');

Answer 3

Just to put the two previous answers together:

var img = document.getElementById('<%= Img1.ClientID %>');

Answer 4

You want to use the document.getElementById function.