How do i access 'src' attribute of <img> tag in javascript?

Question

<html>
<head></head>
<body>
<div id="ctl00_ContentPlaceHolder1_ctl00_ctl01_Showcase">
<div style="width:100%;text-align:center;"><img src="http://www.xyz.com/aaa.gif" id="ctl00_ContentPlaceHolder1_ctl00_ctl01_loderImg" alt="Loading" /></div>        </div>
<script>
q= document.getElementById('ctl00_ContentPlaceHolder1_ctl00_ctl01_Showcase').childNodes[1].getAttribute('src').innerHTML;

alert(q);

</script>
</body>
</html>

how do i access 'src' attribute of img tag ? im above code it gives null value so whats wrong ?

ThinkingStiff · Accepted Answer · 2012-06-25 04:20:00Z

21

You can use src on your image directly. Also, you don't need .innerHTML.

Demo: http://jsfiddle.net/ThinkingStiff/aU2H2/

document.getElementById( 'ctl00_ContentPlaceHolder1_ctl00_ctl01_loderImg' ).src;

HTML:

<html>
<head></head>
<body>
<div id="ctl00_ContentPlaceHolder1_ctl00_ctl01_Showcase">
    <div style="width:100%;text-align:center;"><img src="http://placekitten.com/100/100" id="ctl00_ContentPlaceHolder1_ctl00_ctl01_loderImg" alt="Loading" /></div>        
</div>
<script>
    q = document.getElementById( 'ctl00_ContentPlaceHolder1_ctl00_ctl01_loderImg' ).src;
    alert(q);
</script>
</body>
</html>

edited Jun 25, 2012 at 4:20

answered Jun 25, 2012 at 4:09

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

coolguy · Accepted Answer · 2012-06-25 04:04:14Z

9

alert(document.getElementById('your_image_id').getAttribute('src'));

answered Jun 25, 2012 at 4:04

coolguy

7,9549 gold badges48 silver badges72 bronze badges

Comments

user1318194 · Accepted Answer · 2012-06-25 04:03:41Z

0

With jQuery:

var imgsrc = $("#ctl00_ContentPlaceHolder1_ctl00_ctl01_loderImg").attr("src");

jQuery is the most robust way IMO.

answered Jun 25, 2012 at 4:03

user1318194

6 Comments

coolguy Over a year ago

The user not tagged the question in jquery

user1318194 Over a year ago

I'd suggest using jQuery for this kind of thing - it handles it very well

coolguy Over a year ago

Yeah we all know the best way is jquery..i too agree..but the asker wants in javascript

user1318194 Over a year ago

jQuery is Javascript... I don't see reason for that or @Matt Wolfe's answer to get downvoted.

Eli Over a year ago

jQuery may be JavaScript, but not all JavaScript is jQuery. User asked for JS, not jQuery. It is clear the user is using vanilla JS to achieve this.

|

Matt Wolfe · Accepted Answer · 2012-06-25 04:26:44Z

0

First off, you shouldn't use .innerHTML at the end as attributes don't have innerHTML data. Secondly, JS is very fragile with how it handles children when it comes to whitespace. I would recommend targeting the image by ID as others have pointed out. Alternatively you could use something like this:

q= document.getElementById('ctl00_ContentPlaceHolder1_ctl00_ctl01_Showcase').getElementsByTagName("img")[0].getAttribute("src");

to reference the ctl00_ContentPlaceHolder1_ctl00_ctl01_Showcase node and then find the image underneath it.

edited Jun 25, 2012 at 4:26

answered Jun 25, 2012 at 4:02

Matt Wolfe

9,3449 gold badges65 silver badges82 bronze badges

Collectives™ on Stack Overflow

How do i access 'src' attribute of <img> tag in javascript?

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related