Question

我想在HTML中获取img元素的src。它看起来像这样：

<div class="image_wrapper" id="this_one">
        <img src="Images/something.jpg" />
</div>

当我在img中放入一个ID时非常简单，并且很容易得到这个src。

但问题是当我从div元素获得img的src时。

var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);

我需要在字符串中获取此URL。但不值得。

Answer 1

为什么不尝试这样的事情：

var someimage = document.getElementById('this_one');
var myimg = someimage.getElementsByTagName('img')[0];
var mysrc = myimg.src;

有关使用getElementsByTagName的更多信息，您可能需要查看：

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

有一些错误检查，我没有在这里做，但我只是想告诉你如何做到这一点。

Answer 2

甚至更简单：

document.getElementById('yourimageID').getElementsByTagName('img')[0].src

为我工作

Answer 3

问题是您在div和img标记之间有空格字符。这就是为什么div的第一个元素不是图像而是文本 - 它没有方法 getAttribute 。

您可以删除空格并按原样使用您的js：

<div class="image_wrapper" id="this_one"><img src="Images/something.jpg" /></div>

它将起作用：

var someimage = document.getElementById('this_one').firstChild.getAttribute("src");
alert(someimage);

您可以使用getElementsByTagName('img')从您的div中获取图片代码，如下所示：

var divEl = document.getElementById('this_one'),
    src = divEl.getElementsByTagName('img')[0].src;

以上将解决您的任务。

你可以从Scripting Documents获得更多信息，我建议你阅读本章。

Answer 4

我知道问题是js已被回答，对于jquery

var image = $('#this_one img')[0];       // $('#this_one img') this will return the img array. In order to get the first item use [0]
var imageSrc = image.src;
alert(imageSrc);

对于在jquery中看起来类似的人来说，这可能很有用。

Answer 5

首先，不要使用element.firstChild，而是使用element.children[0]。另外，请使用element.getAttribute('src')代替element.src。

希望这有帮助，

Awesomeness01

Answer 6

如果可以通过querySelector获取文档中的img src，为什么需要使用jQuery？

尝试一下：

document.querySelector('[src*="Images/something.jpg"]')

P.S.：jQuery的最小文件大小为94 kb。除非有要求，否则请不要包含它。

从div获取img元素的src？

6 个答案: