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

【问题标题】：Javascript : get <img> src and set as variable?Javascript：获取 <img> src 并设置为变量？
【发布时间】：2011-12-14 12:07:03
【问题描述】：

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

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

【问题讨论】：

一个 JavaScript 问题而不是一个使用 jQuery 的答案？多么奇怪！ var youtubeimgsrc = $('youtubeimg').attr('src');

标签： javascript image src

【解决方案1】：

只要脚本在img之后，那么：

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

请参阅 DOM 规范中的 getElementById。

如果脚本在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，就像你的问题中的那个，那没关系。

【讨论】：

【解决方案2】：

例如这个怎么样：

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

【讨论】：

不需要getAttribute，src 是由标准记录的reflected property，自 90 年代中期以来所有浏览器都支持（呃，不是按那个顺序 ;-)）。
@T.J.克劳德是对的，如果他想添加他可以使用的自定义属性，这只是替代方法。如果我是他，我仍然会选择你的答案。
@T.J.Crowder: .src 和 .getAttribute('src') 返回不同的结果。第一个选项将解析 URL 而第二个选项将按原样返回 src 参数。因此，这是问题的正确答案。
@Daew：如果属性中的 URL 是相对的，它们确实会给出不同的返回值，是的。但是，问题中src 中的 URL 是绝对的。
@T.J.Crowder：我同意，在大多数用例中，使用哪一个并不重要。我只是想指出，由于它们返回不同的结果，因此此方法也很相关，而不仅仅是别名。感谢您更新您的答案 =)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

如果您在图像上没有 id 但有父 div，这也是您可以使用的一种技术。

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

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

【讨论】：

【解决方案6】：

使用 JQuery，很简单。

将 JQuery 库包含在头部的 html 文件中，如下所示：

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

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

在你的 JavaScript 文件中定位你的 id：

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

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

</script>

【讨论】：

好的，即使这样也很简单..document.getElementById("youtubeimg").src? .. 或者如果你只是定义自己的函数function a(elem){ return document.getElementById(elem); } 现在这是最简单的var youtubeimgsrc = a('youtubeimg').src