Изменить все <img> тег атрибуты src в html документе?

-4

Учитывая любой html-документ с любым количеством тегов <img> и с помощью javascript, как я могу изменить все атрибуты src тегов <img>?Изменить все <img> тег атрибуты src в html документе?

Например изменить все атрибуты SRC в <img> теги из "http://example.com/somerandomimage.jpg" до "http://example.com/somerandomimage.jpg?foo=bar"

EDIT JQuery и другие библиотеки JavaScript в порядке. Не нужно быть ванильным javascript.

источник

2016-10-12 richard

во время выполнения время сборки –

... К сожалению, в JavaScript ... – richard

это может означать передний конец, фоновым, строить и т.д. –

Использование 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> Должен быть хорошо сформирован и внедрен в единый элемент.

Force один корень следующим образом:

$("*[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: вы загружаете jquery с помощью тега 'script' с одним из URL-адресов cdn, возможно, соответствующим нужной вам версии. См. Сайт jquery для получения информации о том, какие URL-адреса поддерживаются. Код будет работать в соответствующем обработчике событий. Если у вас есть строка, вы можете проанализировать ее в элементе и использовать этот элемент в качестве контекста для кода в ответе. – collapsar

@richard: см. Изменения моего ответа. – collapsar

Вы можете использовать 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"; 
}

источник

2016-10-12 00:47:30 guest271314

Не должно быть '' img [src] "'? В противном случае он попытается также изменить элементы сценария и iframe. – nnnnnn

@nnnnnn Да, selector '" 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:

$(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 и что нет необходимости проверять, содержит ли уже существующий URL-адрес src строку запроса. Но если это было, возможно, что 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> тег атрибуты src в html документе?

ответ

Смежные вопросы