Change all

2019-09-25 08:03发布

站内问答 / JavaScript
985 5 4

Given any html document with any number of <img> tags, and using javascript, how can I change all the src attributes of the <img> tags?

For example change all src attributes in <img> tags from "http://example.com/somerandomimage.jpg" to "http://example.com/somerandomimage.jpg?foo=bar"

EDIT jquery and other javascript libraries are ok. No need to be vanilla javascript.

5条回答
女痞
2楼-- · 2019-09-25 08:41

Here's how you can change the src for all the images at once with jQuery:

$(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">

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-09-25 08:42

You can use document.querySelectorAll() with selector "img[src]" or "[src]"; String.prototype.indexOf(); String.prototype.slice().

If you are trying to select only <img> elements which have a src attribute set, you can substitute selector "img[src]" for "[src]"; where "[src]" selects all elements in document where src attribute is present at element 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";
}
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
4楼-- · 2019-09-25 08:42 
var imgs = document.querySelectorAll("img");
imgs.forEach(function(img) {
   var oldVal = img.getAttribute('src');
   img.setAttribute('src', oldVal + newVal);
});
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
5楼-- · 2019-09-25 08:45

This is a one-liner in jQuery:

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

Wrap it in a document ready handler or include in a script at the end of the body.

Note that the OP confirmed in a comment that the requirement is just to append a specific query string to all img element src attributes, and that there is no need to test whether the existing src URL already includes a query string. But if it was possible that a URL might already have a query string then a minor change to the above can handle it by testing for a "?":

$("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">

查看更多
0人赞 添加讨论(0) 举报
淡お忘
6楼-- · 2019-09-25 08:58

Using jquery:

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

In case you intend to replace certain urls only, constrain the selector:

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

The same operation when having a html string in the first place:

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

The <html snippet> should be well-formed and rooted in a single element.

Force a single root as follows:

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

Note the traversal to the generated root as wrapAll returns the original jquery object.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)