Javascript get img src and set as variable

Question

If the img below is present   lt img id  youtubeimg  src  http   i1 ytimg com vi VK4ah66jBvE 0 jpg   gt    and the script is   lt script gt  var youtubeimgsrc    something here   document write    youtubeimgsrc      lt  script gt    and the result should be http   i1 ytimg com vi VK4ah66jBvE 0 jpg  what can i do to get the image source and set as a variable

User · Answer

in this situation  you would grab the element by its id using getElementById and then just use  src  var youtubeimgsrc   document getElementById  youtubeimg   src

User · Answer

How about this for instance    var youtubeimgsrc   document getElementById  youtubeimg   getAttribute  src

User · Answer

If you don t have an id on the image but have a parent div this is also a technique you can use    lt div id  myDiv  gt  lt img src  http   www example com image png  gt  lt  div gt   var myVar   document querySelectorAll   myDiv img   0  src

User · Answer

var youtubeimgsrc   document getElementById  youtubeimg   src  document write youtubeimgsrc     Here s a fiddle for you http   jsfiddle net cruxst dvrEN

User · Answer

As long as the script is after the img  then   var youtubeimgsrc   document getElementById  youtubeimg   src    See getElementById in the DOM specification   If the script is before the img  then of course the img doesn t exist yet  and that doesn t work  This is one reason why many people recommend putting scripts at the end of the body element     Side note  It doesn t matter in your case because you ve used an absolute URL  but if you used a relative URL in the attribute  like this    lt img id  foo  src   images example png  gt       the src reflected property will be the resolved URL nbsp  mdash  that is  the absolute URL that that turns into  So if that were on the page http   www example com  document getElementById  foo   src would give you  http   www example com images example png    If you wanted the src attribute s content as is  without being resolved  you d use getAttribute instead  document getElementById  foo   getAttribute  src    That would give you   images example png  with my example above   If you have an absolute URL  like the one in your question  it doesn t matter

User · Answer

Use JQuery  its easy   Include the JQuery library into your html file in the head as such    lt head gt     lt script src  https   ajax googleapis com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt   lt  head gt     Make sure that this script tag goes before your other script tags in your html file    Target your id in your JavaScript file as such     lt script gt  var youtubeimcsrc       youtubeimg   attr  src       your var will be the src string that you re looking for   lt  script gt

[javascript] Javascript : get <img> src and set as variable?

Examples related to javascript

Examples related to image

Examples related to src