moyens alternatifs pour obtenir l'image src en utilisant JavaScript

Question

donc je sais qu'il est assez facile d'échanger des images de balises img nommées

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

Le problème est que je suis forcé d'utiliser le serveur de contenu, et je peux » t nommez l'étiquette de l'image. Donc, si je nomme une étiquette Div qui entoure l'image, puis-je l'utiliser pour spécifier l'étiquette d'image en question?

Quelque chose comme ..

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

Alors parce que je sais que le parent, et il a seulement 1 tage d'image à l'intérieur, je veux dire « hey Div, donnez-moi votre seul enfant comme un objet »

Answer 1

Chaque noeud dom a une propriété childNodes qui est un tableau de noeuds. Vous pouvez choisir le premier.

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

Answer 2

Oui qui suit, quelque chose comme:

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

Answer 3

Selon le balisage et le navigateur, l'élément <img> peut ne pas être le seul enfant. Par exemple, s'il existe des espaces tels qu'un saut de ligne, de nombreux navigateurs autres que IE créeront un nœud de texte.

Le plus simple est d'utiliser la méthode getElementsByTagName de l'élément d'emballage, qui retourne un NodeList et obtenir le premier élément de ce NodeList:

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

Vous pouvez réduire que si vous ne me dérange pas faire légèrement plus difficile à suivre:

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

mais qui le rend un peu plus difficile à déboguer quand vous faites une erreur ;-)

Answer 4

pourquoi ne pas utiliser c ss style et sprite pour obtenir le même résultat sans javascript. ????

l'idée: http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249

je peux l'expliquer :)