Maison > interface Web > js tutoriel > Comment modifier dynamiquement l'attribut « src » d'une balise d'image à l'aide de JavaScript ?

Comment modifier dynamiquement l'attribut « src » d'une balise d'image à l'aide de JavaScript ?

Susan Sarandon
Libérer: 2024-11-02 13:18:02
original
1034 Les gens l'ont consulté

How to Dynamically Change the `src` Attribute of an Image Tag Using JavaScript?

Modification de l'attribut source d'une balise d'image via JavaScript

Requête :

Comment puis-je modifier l'attribut src de une balise img en utilisant dynamiquement JavaScript ?

Exemple :

Considérez une balise img avec un chemin src initial de "../template/edit.png". Le but est de changer ce chemin en "../template/save.png" lorsque l'on clique sur la balise.

Code HTML avec ID :

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

Code JavaScript avec getElementById :

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

Explication :

En attribuant un identifiant à la balise img, vous pouvez facilement la sélectionner et la manipuler à l'aide de JavaScript. La méthode getElementById renvoie l'élément HTML avec l'identifiant spécifié. Vous pouvez ensuite accéder à sa propriété src et attribuer directement le nouveau chemin source.

Remarque :

Cette approche évite d'avoir à cliquer plusieurs fois pour modifier la source, comme indiqué dans votre tentative précédente.

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