Javascript:获取<img/> src并设置为变量?

时间:2011-10-24 21:43:58

标签: javascript image src

如果下面的img存在

<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 个答案:

答案 0 :(得分:50)

只要脚本在 img之后,那么:

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

请参阅DOM规范中的getElementById

如果脚本是之前的 img,那么img当然还不存在,那就不行了。这就是为什么许多人建议将脚本放在body元素末尾的原因之一。


附注:在您的情况下并不重要,因为您使用了绝对网址,但如果您在属性中使用了 relative 网址,请执行以下操作:

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

... src反映的属性将是已解析的网址 - 即转变为的绝对网址。因此,如果页面位于http://www.example.com页上,则document.getElementById("foo").src将为您提供"http://www.example.com/images/example.png"

如果您希望src属性的内容不是而未经解决,则可以改为使用getAttributedocument.getElementById("foo").getAttribute("src")。这会给你"/images/example.png"上面的例子。

如果你有一个绝对的URL,就像问题中的那个,那没关系。

答案 1 :(得分:6)

例如:

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

答案 2 :(得分:3)

如果您没有图片上的ID,但有父div,这也是您可以使用的技术。

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

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

答案 3 :(得分:0)

在这种情况下,您可以使用getElementById按ID获取元素,然后只使用.src

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

答案 4 :(得分:0)

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

这是你的小提琴http://jsfiddle.net/cruxst/dvrEN/

答案 5 :(得分:0)

使用JQuery,很简单。

将JQuery库包含在头部的html文件中:

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

(确保此脚本标记位于html文件中的其他脚本标记之前)

将您的ID定位在JavaScript文件中:

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

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

</script>