Maison > interface Web > js tutoriel > le corps du texte

Comment mettre à jour dynamiquement l'URL source d'une balise d'image à l'aide de JavaScript ?

Patricia Arquette
Libérer: 2024-10-31 05:25:30
original
368 Les gens l'ont consulté

How do you dynamically update the source URL of an image tag using JavaScript?

Modifier l'URL source d'une image à l'aide de JavaScript

Pour mettre à jour dynamiquement l'URL source d'une balise d'image à l'aide de JavaScript, il est important de s'assurer gestion appropriée des écouteurs d'événements et de l'identification des éléments.

Solution :

  1. Ajouter un identifiant à la balise img :
    Attribuez un identifiant unique à la balise img. Cela vous aidera à le cibler spécifiquement dans le code JavaScript.

    <code class="html"><img src="../template/edit.png" id="edit-save" alt="Edit" /></code>
    Copier après la connexion
  2. Accédez à l'élément Image :
    Utilisez la méthode document.getElementById() pour obtenir une référence à l'élément img.

    <code class="javascript">var editSave = document.getElementById("edit-save");</code>
    Copier après la connexion
  3. Modifier l'attribut src :
    Une fois que vous avez la référence de l'élément image, vous pouvez modifier son src attribut pour mettre à jour la source de l'image.

    <code class="javascript">editSave.src = "../template/save.png";</code>
    Copier après la connexion

Exemple :

Dans votre code fourni, ajoutez un identifiant comme suit :

<code class="html"><a href="#" onclick="edit()"><img src="../template/edit.png" id="edit-save" alt="Edit" /></a></code>
Copier après la connexion

Ensuite, modifiez votre fonction JavaScript :

<code class="javascript">function edit() {
    var editSave = document.getElementById("edit-save");
    editSave.src = "../template/save.png";
}</code>
Copier après la connexion

Avec cette approche, la source de l'image sera mise à jour correctement d'un simple clic sur l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal