Question

说我在网页上有如下的img标签

<img src = "https://www.google.com">

有没有办法让我在javascript中通过src获取这个元素？像document.elementFromSrc（）之类的东西呢？获取此img元素后的目标是找到x和y坐标等

Answer 1

如果您无法添加ID，则可以执行以下操作：

var allImages = document.getElementsByTagName("img");
var target;
for(var i = 0, max = allImages.length; i < max; i++)
    if (allImages[i].src === "https://www.google.com"){
       target = allImages[i];
       break;
    }

但理想情况下，您只需向此img添加一个ID，然后使用document.getElementById

获取该ID

Answer 2

我建议使用jQuery。

var offset = $('img[src="http://www.google.com"]').offset();

这为您提供了文档中的x和y坐标。请参阅offset()和position()的文档。

Answer 3

不要遍历文档中的所有图像。使用查询选择器，该选择器使用正则表达式匹配查询字符串。尝试这个： document.querySelector('[src*="https://www.google.com""]')

PS jquery的最小文件大小为94kb。除非有要求，否则请不要包含它。

Answer 4

没有函数可以通过属性值获取元素（至少，不是广泛支持的元素，尽管类似XPath的选择器很快就会很常见）。你可以这样做一个快速过滤器：

function getElementsByAttributeName(tagName, attributeName, attributeValue) {
  var i, n, objs=[], els=document.getElementsByTagName(tagName), len=els.length;
  for (i=0; i<len; i++) {
    n = els[i][attributeName];
    if (n && (n==attributeValue)) {
      objs.push(els[i]);
    }
  }
  return objs;
}
getElementsByAttributeName('img', 'src', 'http://www.google.com'); // => [<a>]

从已知来源获取img元素

4 个答案: