html - Alternate means to get image src using JavaScript - Stack Overflow

admin管理员组

文章数量:1356808

So I know that it is easy enough to swap images of named img tags

<img name="image1" src="" />
<script>document["image1"].src="candybar.jpg";</script>

The problem is that I am being forced to use content server, and I can't name the image tag.

So If I name a Div tag that wraps the image can I use that to specify the image tag in question?

Something like..

<div id="namedDiv"><img src="" /></div>
<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.$imgtag$.src="candybar.jpg";
</script>

So because I know the parent, and it only has 1 image tage within, i want to say "hey Div, give me your only child as an object"

So I know that it is easy enough to swap images of named img tags

<img name="image1" src="" />
<script>document["image1"].src="candybar.jpg";</script>

The problem is that I am being forced to use content server, and I can't name the image tag.

So If I name a Div tag that wraps the image can I use that to specify the image tag in question?

Something like..

<div id="namedDiv"><img src="" /></div>
<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.$imgtag$.src="candybar.jpg";
</script>

So because I know the parent, and it only has 1 image tage within, i want to say "hey Div, give me your only child as an object"

• javascript
• html
• image

Share Improve this question Follow asked Aug 31, 2009 at 14:55 EddieEddie 10.2k44 gold badges4747 silver badges5959 bronze badges 1

• Based on djko's answer, here's my final solution [code] <script type="text/javascript"> //source div. var imgDiv=document.getElementById('hidImgDiv'); //target img. var eventBg=document.getElementById('eventDate'); eventBg.style.background='url('+imgDiv.childNodes[1].src+') no-repeat scroll 55% 90%'; </script> [/code] – Eddie Commented Aug 31, 2009 at 15:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Yes that follows, something like:

document.getElementById('namedDiv').getElementsByTagName('img')[0].src = 'mynewpath.jpg';

Every dom node have childNodes property which is an array of nodes. You can pick first one.

<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.childNodes[0].src="candybar.jpg";
</script>

Depending on the markup and the browser, the <img> element may not be the only child. For example, if there is any whitespace such as a line break then many browsers other than IE will create a text node.

The easiest way is to use the getElementsByTagName method of the wrapper element, which returns a NodeList, and get the first element in that NodeList:

var div = document.getElementById("namedDiv");
var image = div.getElementsByTagName("img")[0];
image.src = "candybar.jpg";

You can shorten that if you don't mind making it slightly harder to follow:

document.getElementById("namedDiv").getElementsByTagName("img")[0].src = "candybar.jpg";

but that makes it a bit harder to debug when you make a mistake ;-)

why dont use css style and sprite for get the same resutl without javascript. ????

the idea: http://www.pixelovers./css-sprites-mejora-rendimiento-web-i-37249

I can explain it :)

本文标签： htmlAlternate means to get image src using JavaScriptStack Overflow