Question

如果任何html文档包含任意数量的<img>标记，并使用javascript，我该如何更改<img>标记的所有src属性？

例如，将<img>代码中的所有src属性从“http://example.com/somerandomimage.jpg”更改为“http://example.com/somerandomimage.jpg?foo=bar”

编辑 jquery和其他javascript库都可以。不需要是香草javascript。

Answer 1

您可以document.querySelectorAll()使用选择器"img[src]"或"[src]"; String.prototype.indexOf(); String.prototype.slice()。

如果您只想选择设置了<img>属性的src元素，则可以将选择器"img[src]"替换为"[src]";其中"[src]"选择document中元素src中html属性所在的所有元素。

for (el of document.querySelectorAll("img[src]")) {
  el.src = el.src.slice(0, el.src.indexOf("?") > -1 
             ? el.src.indexOf("?") : el.src.length
           ) + "?foo=bar";
}

Answer 2

使用jquery：

$("*[src]").attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

如果您打算仅替换某些网址，请约束选择器：

$("*[src='http://example.com/somerandomimage.jpg']").attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

首先使用html字符串时的相同操作：

$("*[src='http://example.com/somerandomimage.jpg']", $(<html snippet>)).attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

<html snippet>应格式正确，并以单个元素为根。

按如下方式强制使用单个根：

$("*[src='http://example.com/somerandomimage.jpg']", $(<html snippet>).wrapAll("<div/>").first().parent()).attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

注意，生成的根遍历为wrapAll，返回原始jquery对象。

Answer 3

这是jQuery中的一行内容：

$("img").prop("src", function(i, oldVal) { return oldVal + "?foo=bar"; });

将其包装在文档就绪处理程序中，或包含在正文末尾的脚本中。

请注意，OP在评论中确认要求只是将特定查询字符串附加到所有img元素src属性，并且无需测试现有的src URL已包含查询字符串。但是，如果可能已经有一个URL可能已经有一个查询字符串，那么对上面的一个小改动可以通过测试“？”来处理它：

$("img").prop("src", function(i, oldVal) {
  return oldVal + (oldVal.indexOf("?") === -1 ? "?" : "&") + "foo=bar";
});

// confirm the changes:
console.log($("img").map(function() { return this.src; }).get().join("\n"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://test.com/whatever.jpg">
<img src="http://test.com/something.jpg">
<img src="http://blah.com/whatever.jpg?a=b&c=d">

Answer 4

var imgs = document.querySelectorAll("img");
imgs.forEach(function(img) {
   var oldVal = img.getAttribute('src');
   img.setAttribute('src', oldVal + newVal);
});

Answer 5

以下是使用jQuery一次更改所有图像的src的方法：

$(document).ready(function() {
  $('img').each(function() {
    var src = $(this).attr('src');
    $(this).attr('src', src + '?foo=bar');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="http://example.com/somerandomimage.jpg">
<img src="http://example.com/somerandomimagetwo.jpg">

更改html文档中的所有<img/>标记src属性？

5 个答案: