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

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;

请参阅getElementByIdDOM规范.

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

旁注:在您的情况下并不重要,因为您使用了绝对URL,但如果您在属性中使用了相对 URL,则如下所示:

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

... src反射的属性将是已解析的 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,就像你问题中的那个,那也没关系.

Answer 2

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

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

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

Answer 3

比如这个怎么样:

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