13

我想在 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。但不值得。

4

6 回答 6

38

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

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

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

于 2012-06-23T17:34:20.590 回答
5

甚至更简单：

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

为我工作

于 2014-07-04T08:44:43.117 回答
1

问题是您在divandimg标记之间有空格字符。这就是为什么 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获得，我建议你阅读这一章。

于 2012-06-23T18:08:27.430 回答
1

我知道这个问题是针对已回答的 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 中看起来相似的人有用。

于 2015-01-06T13:51:43.650 回答
1

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

希望这可以帮助，

真棒01

于 2015-04-02T03:13:37.333 回答
1

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

试试这个：

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

PS：jQuery 有 94 kb 的缩小文件大小。除非有要求，否则请不要包含它。

于 2018-08-02T06:35:09.000 回答