Javascript: получить <img> src и установить как переменную?

Если присутствует img ниже

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

а script -

<script>
var youtubeimgsrc = "something here"

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

и результат должен быть http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg

что я могу сделать, чтобы получить источник изображения и установить его как переменную.

Ответы

Ответ 1

Пока script после img, тогда:

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

См. getElementById в спецификации DOM.

Если script находится перед img, то, конечно, img еще не существует, и это не работает. Это одна из причин, почему многие рекомендуют ставить скрипты в конце элемента body.

Примечание: в вашем случае это не имеет значения, потому что вы использовали абсолютный URL-адрес, но если вы использовали относительный URL-адрес в атрибуте, например:

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

... отраженное свойство src будет разрешенным URL — то есть абсолютный URL-адрес, который превращается в. Так что если бы это было на странице http://www.example.com, document.getElementById("foo").src предоставит вам "http://www.example.com/images/example.png".

Если вам нужен контент атрибута src как есть, без разрешения, вместо getAttribute используйте getAttribute: document.getElementById("foo").getAttribute("src"). Это даст вам "/images/example.png" с моим примером выше.

Если у вас есть абсолютный URL-адрес, например, тот, что в вашем вопросе, это не имеет значения.

Ответ 2

Как насчет этого, например:

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

Ответ 3

Если у вас нет идентификатора изображения, но есть родительский div, это также метод, который вы можете использовать.

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

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

Ответ 4

в этой ситуации вы бы захватили элемент по его идентификатору, используя getElementById, а затем просто используйте .src

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

Ответ 5

var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);

Вот сценарий для вас http://jsfiddle.net/cruxst/dvrEN/

Ответ 6

Используйте JQuery, его легко.

Включите библиотеку JQuery в ваш html файл в голове как таковой:

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

(Убедитесь, что этот тег script идет перед вашими другими тегами script в вашем html файле)

Настройте свой идентификатор в файле JavaScript как таковой:

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

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

</script>