Programowo zmień src znacznika img

242

Jak mogę zmienić srcatrybut imgznacznika za pomocą javascript?

<img src="../template/edit.png" name=edit-save/>

na początku mam domyślny plik src, którym jest „../template/edit.png” i chciałem go zmienić za pomocą „../template/save.png” po kliknięciu.

ZAKTUALIZOWANO: oto mój html onclick:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

i mój JS

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

Próbowałem wstawić to w edit (), działa, ale muszę dwukrotnie kliknąć obraz

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }
javascript html image src Jam Ville
źródło

Odpowiedzi:

307

Daj swojemu tagowi img identyfikator, wtedy możesz

document.getElementById("imageid").src="../template/save.png";
Matthias
źródło
16
W przypadku prostych rzeczy, takich jak ustawienie wartości wejściowej lub zmiana obrazu src ( szczególnie, gdy używasz elementów posiadających identyfikatory), naprawdę powinieneś spróbować uniknąć jQuery, ponieważ wywołanie jest o wiele wolniejsze niż czysto wywołanie JS
Brian Leishman,
2
@ william44isme, a nasza strona będzie ładowana wolniej niż wcześniej. myślę, że jQuery jest przydatny tylko dla stron internetowych, które używają tego samego kodu, a nawet więcej. na przykład, jeśli użyjemy powyższego kodu więcej niż 30 lub 50 razy. więc konieczne jest użycie jQuery
Mahdi Jazini
62

Możesz użyć zarówno metody jquery, jak i javascript: jeśli masz na przykład dwa obrazy:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1) Metoda Jquery->

$(".image2").attr("src","image1.jpg");

2) Metoda Javascript->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

W przypadku tego typu problemów jquery jest proste w użyciu.

chandanjha
źródło
21
Plakat nigdy nie wykazywał zainteresowania rozwiązaniem jQuery. Metoda jQuery nie jest również prostsza. Nie odpowiadaj na pytania JS za pomocą rozwiązań jQuery (chyba że post wskazuje, że tego chcą). To tylko myli ludzi próbujących nauczyć się JS.
metaColin
6
getElementByClassName zwraca kolekcję wszystkich elementów. Musimy również wspomnieć o indeksie elementu. var image = document.getElementsByClassName („image2”) [0]; image.src = "image1.jpg"
Tushar Gaurav
34

jeśli korzystasz z biblioteki JQuery, skorzystaj z tej instrukcji:

$("#imageID").attr('src', 'srcImage.jpg');
Alessandro Pirovano
źródło
24
Pytanie nie wymaga odpowiedzi jQuery, nie zawiera tagu jQuery ani sugeruje, że użycie jQuery jest w porządku.
Popnoodles,
10
Mówienie ludziom o korzystaniu z jQuery, gdy odpowiednia funkcja jest wbudowana bezpośrednio w JavaScript, nie ma sensu. Każde pytanie JS nie wymaga odpowiedzi jQuery. To rozwiązanie jest przeszkodą, która uniemożliwia ludziom poznanie tego, co może zrobić waniliowy JS.
metaColin
27

teraz jest ok

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}
Jam Ville
źródło
8 
<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />
Donatas Olsevičius
źródło
Inline JS nie jest świetnym pomysłem.
FluorescentGreen5,
7

W takim przypadku, gdy chcesz zmienić srcpierwszą wartość swojego elementu, nie musisz budować funkcji. Możesz zmienić to prawo w elemencie:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Masz na to kilka sposobów. Możesz także utworzyć funkcję automatyzującą proces:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */
  p.firstChild.src = t
}

Następnie możesz:

<a href='#' onclick='changeSrc(this, "../template/save.png");'>
  <img src="../template/edit.png" id="edit-save"/>
</a>
Marcelo Camargo
źródło
6

Za pomocą dostarczonego fragmentu kodu (bez zakładania rodziców elementu) można uzyskać odniesienie do obrazu za pomocą

document.querySelector('img[name="edit-save"]');

i zmień src za pomocą 

document.querySelector('img[name="edit-save"]').src = "..."

dzięki czemu można osiągnąć pożądany efekt 

var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
    this.src = "..." // this is the reference to the image itself
};

w przeciwnym razie, jak sugerują inni, jeśli masz kontrolę nad kodem, lepiej jest przypisać iddo obrazu referencję getElementById(ponieważ jest to najszybsza metoda pobrania elementu)

Fabrizio Calderan
źródło
6

Nadaj swojemu zdjęciu identyfikator. Następnie możesz to zrobić w swoim javascript.

document.getElementById("blaah").src="blaah";

Możesz użyć metody „.___”, aby zmienić wartość dowolnego atrybutu dowolnego elementu.

Ben
źródło