web-dev-qa-db-fra.com

Javascript: récupère <img> src et définit comme variable?

Si le img ci-dessous est présent

<img id="youtubeimg" src="http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg"/>

et le script est

<script>
var youtubeimgsrc = "something here"

document.write(''+youtubeimgsrc+'')
</script>

et le résultat devrait être http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg

que puis-je faire pour obtenir la source de l'image et définir comme une variable.

javascriptimagesrc
25
Yusaf Khaliq

Tant que le script est après le img, alors:

var youtubeimgsrc = document.getElementById("youtubeimg").src;

Voir getElementById dans la spécification DOM.

Si le script est avant le img, alors bien sûr le img n'existe pas encore et cela ne ça marche pas. C'est l'une des raisons pour lesquelles de nombreuses personnes recommandent de placer des scripts à la fin de l'élément body.

Note secondaire: Dans votre cas, cela n'a pas d'importance, car vous avez utilisé une URL absolue, mais si vous avez utilisé une URL relative dans l'attribut, comme cette:

<img id="foo" src="/images/example.png">

... la propriété reflétée src sera l'URL résolue - c'est-à-dire l'URL absolue transformée en. Donc, si cela se trouvait sur la page http://www.example.com, document.getElementById("foo").src vous donnerait "http://www.example.com/images/example.png".

Si vous vouliez le contenu de l'attribut src tel quel , sans que cela soit résolu, vous utiliseriez plutôt getAttribute: document.getElementById("foo").getAttribute("src"). Cela vous donnerait "/images/example.png" Avec mon exemple ci-dessus.

Si vous avez une URL absolue, comme celle de votre question, peu importe.

57
T.J. Crowder

Qu'en est-il par exemple:

var youtubeimgsrc = document.getElementById("youtubeimg").getAttribute('src');
6
ant

Si vous n'avez pas d'identifiant sur l'image mais avez un div parent, c'est aussi une technique que vous pouvez utiliser.

<div id="myDiv"><img src="http://www.example.com/image.png"></div>

var myVar = document.querySelectorAll('#myDiv img')[0].src
3
ak85

dans cette situation, vous devez saisir l'élément par son identifiant en utilisant getElementById, puis simplement en utilisant .src

var youtubeimgsrc = document.getElementById("youtubeimg").src;
0
Joseph Marikle
var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);

Voici un violon pour vous http://jsfiddle.net/cruxst/dvrEN/

0
Andrew Kolesnikov

Utilisez JQuery, c’est facile.

Incluez la bibliothèque JQuery dans votre fichier html dans l'en-tête en tant que tel:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

(Assurez-vous que cette balise de script est placée avant vos autres balises de script dans votre fichier html)

Ciblez votre identifiant dans votre fichier JavaScript en tant que tel:

<script>
var youtubeimcsrc = $('#youtubeimg').attr('src');

//your var will be the src string that you're looking for

</script>
0
Travis Smith