Javascript：获取 <img> src 并设置为变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7882356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript : get <img> src and set as variable?
提问by Yusaf Khaliq
If the img below is present
如果下面的img存在
<img id="youtubeimg" src="http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg"/>
and the script is
脚本是
<script>
var youtubeimgsrc = "something here"
document.write(''+youtubeimgsrc+'')
</script>
and the result should be http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg
结果应该是 http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg
what can i do to get the image source and set as a variable.
我该怎么做才能获取图像源并将其设置为变量。
回答by T.J. Crowder
As long as the script is afterthe img, then:
只要剧本后的img，则：
var youtubeimgsrc = document.getElementById("youtubeimg").src;
See getElementByIdin the DOM specification.
请参阅getElementByIdDOM 规范。
If the script is beforethe img, then of course the imgdoesn't exist yet, and that doesn't work. This is one reason why many people recommend putting scripts at the end of the bodyelement.
如果脚本是之前的img，那当然img还不存在，那是行不通的。这就是为什么许多人建议将脚本放在body元素末尾的原因之一。
Side note: It doesn't matter in your case because you've used an absolute URL, but if you used a relativeURL in the attribute, like this:
旁注：在您的情况下无关紧要，因为您使用了绝对 URL，但是如果您在属性中使用了相对URL，如下所示：
<img id="foo" src="/images/example.png">
...the srcreflected property will be the resolvedURL — that is, the absolute URL that that turns into. So if that were on the page http://www.example.com, document.getElementById("foo").srcwould give you "http://www.example.com/images/example.png".
... srcreflected 属性将是解析后的URL — 即转换成的绝对 URL。所以如果那是在页面上http://www.example.com，document.getElementById("foo").src会给你"http://www.example.com/images/example.png"。
If you wanted the srcattribute's content as is, without being resolved, you'd use getAttributeinstead: document.getElementById("foo").getAttribute("src"). That would give you "/images/example.png"with my example above.
如果您想要src属性的内容原样，而不被解析，您可以使用getAttribute：document.getElementById("foo").getAttribute("src")。那会给你"/images/example.png"我上面的例子。
If you have an absolute URL, like the one in your question, it doesn't matter.
如果你有一个绝对 URL，比如你问题中的那个，那没关系。
回答by ak85
If you don't have an id on the image but have a parent div this is also a technique you can use.
如果您在图像上没有 id 但有父 div，这也是您可以使用的技术。
<div id="myDiv"><img src="http://www.example.com/image.png"></div>
var myVar = document.querySelectorAll('#myDiv img')[0].src
回答by ant
How about this for instance :
例如这个怎么样：
var youtubeimgsrc = document.getElementById("youtubeimg").getAttribute('src');
回答by Joseph Marikle
in this situation, you would grab the element by its id using getElementByIdand then just use .src
在这种情况下，您可以使用它的 id 获取元素getElementById，然后使用.src
var youtubeimgsrc = document.getElementById("youtubeimg").src;
回答by Andrew Kolesnikov
var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);
Here's a fiddle for you http://jsfiddle.net/cruxst/dvrEN/
回答by Travis Smith
Use JQuery, its easy.
使用JQuery，很简单。
Include the JQuery library into your html file in the head as such:
将 JQuery 库包含在头部的 html 文件中，如下所示：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
(Make sure that this script tag goes before your other script tags in your html file)
（确保此脚本标记位于 html 文件中的其他脚本标记之前）
Target your id in your JavaScript file as such:
在您的 JavaScript 文件中定位您的 id，如下所示：
<script>
var youtubeimcsrc = $('#youtubeimg').attr('src');
//your var will be the src string that you're looking for
</script>
