Question

如果下面的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

如何获取图像源并将其设置为变量。

Answer 1

只要脚本在 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属性的内容不是而未经解决，则可以改为使用getAttribute：document.getElementById("foo").getAttribute("src")。这会给你"/images/example.png"上面的例子。

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

Answer 2

例如：

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

使用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>

Javascript：获取<img/> src并设置为变量？

6 个答案: