JavaScript: получить <img>SRC и установить в качестве переменной? - PullRequest
Новая
       16

JavaScript: получить <img>SRC и установить в качестве переменной?

24 голосов
/ 25 октября 2011

Если изображение ниже присутствует 

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

и сценарий 

<script>
var youtubeimgsrc = "something here"

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

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

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

Ответы [ 6 ]

54 голосов
/ 25 октября 2011

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

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

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

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

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

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

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

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

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

6 голосов
/ 25 октября 2011

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

var youtubeimgsrc = document.getElementById("youtubeimg").getAttribute('src');
3 голосов
/ 30 января 2015

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

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

var myVar = document.querySelectorAll('#myDiv img')[0].src
0 голосов
/ 08 июня 2017

Используйте JQuery, это просто.

Включите библиотеку JQuery в ваш HTML-файл в заголовке следующим образом: 

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

(убедитесь, что этот тег сценария идет перед другими тегами сценария в html-файле)

Настройте свой идентификатор в своем файле JavaScript следующим образом: 

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

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

</script>
0 голосов
/ 25 октября 2011 
var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);

Вот вам скрипка http://jsfiddle.net/cruxst/dvrEN/

0 голосов
/ 25 октября 2011

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

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