如果下面的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
如何获取图像源并将其设置为变量。
答案 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
属性的内容不是而未经解决,则可以改为使用getAttribute
:document.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);
答案 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>