更改所有<img> html文檔中的標籤src屬性？

-4

鑑於任何具有任意數量的<img>標記的html文檔，並且使用javascript，我如何更改<img>標記的所有src屬性？更改所有<img> html文檔中的標籤src屬性？

例如改變<img>標籤的所有src屬性用於從「http://example.com/somerandomimage.jpg」到「http://example.com/somerandomimage.jpg?foo=bar」

編輯 jQuery和其他JavaScript庫都OK。沒有必要成爲香草的JavaScript。

來源

2016-10-12 richard

在運行時的建造時間 –

對不起......在JavaScript ... – richard

，這可能意味着前端，後端，建設等 –

使用jQuery：

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

如果你打算只更換某些網址，限制了選擇：具有在首位的HTML字符串時

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

相同的操作：

$("*[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對象。

來源

2016-10-12 00:47:07 collapsar

這是jquery是否正確？假設我有一個字符串並需要這樣做，我可以使用jQuery.parseHTML（mystring）來獲取文檔，然後如何使用您的答案？ – richard

@richard：你用一個'script'標籤加載jquery到其中一個cdn url，可能需要你的版本。查看jquery站點獲取哪些url支持的信息。代碼將在適當的事件處理程序中進行。如果你確實有一個字符串，你可以將它解析爲一個元素，並將該元素用作答案中代碼的上下文。 – collapsar

@richard：查看我對答案的編輯。 – collapsar

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

如果你想只選擇<img>其中有一個src屬性集元素，可以爲"[src]"替代選擇"img[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"; 
}

來源

2016-10-12 00:47:30 guest271314

不應該是'「img [src]」'？否則，它會嘗試更改腳本和iframe元素。 – nnnnnn

@nnnnnn是的，選擇器'「img [src]」'可以代替'「[src]」'。請閱讀OP的這一部分_「如何更改標籤的所有src屬性？」_，_「例如，更改標籤中的所有src屬性」_。查看更新後的文章 – guest271314

我指的是問題標題。 – nnnnnn

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

來源

2016-10-12 00:49:20 user3115197

下面是您可以一次使用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">

來源

2016-10-12 00:50:51

這是一個班輪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">

來源

2016-10-12 00:59:03 nnnnnn

更改所有<img> html文檔中的標籤src屬性？

回答

相關問題