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

Comment changer l'attribut src d'un élément img en JavaScript/jQuery ?

WBOY
Libérer: 2023-08-23 16:49:14
avant
2551 Les gens l'ont consulté

En utilisant JavaScript et jQuery, il existe différentes manières de modifier le chemin de l'image indiqué dans l'attribut src de l'élémentComment changer l'attribut src d'un élément img en JavaScript/jQuery ?dans un document HTML.

Comment modifier l'attribut src de l'élément img à l'aide de JavaScript−

  • Utilisez l'attribut src en JavaScript.

Comment modifier l'attribut src de l'élément img à l'aide de jQuery−

  • Utilisez la méthode attr()

  • Utilisez la méthode prop()

Discutons en détail des méthodes répertoriées ci-dessus pour modifier le src de l'élément img, une par une.

Utilisation de l'attribut src en JavaScript

JavaScript nous permet d'utiliser l'attribut src pour obtenir la valeur qui lui a été attribuée et également de mettre à jour ou de modifier la valeur du même attribut. Il s'agit d'une manière très courante de modifier la valeur de l'attribut src d'un élément img.

Syntaxe

La syntaxe suivante vous expliquera comment utiliser l'attribut src en JavaScript pour modifier la valeur de l'attribut src de l'élément img -

Selected_image_element.src = " new value ";
Copier après la connexion

Comprenons la mise en œuvre pratique de cette approche à travers un exemple de code.

Algorithme

  • Étape 1− Dans la première étape, nous ajouterons un élément img avec un attribut src qui lui est associé, dont nous modifierons la valeur plus tard en utilisant la propriété src en JavaScript.

  • Étape 2- Dans cette étape, nous ajouterons un élément bouton avec un événement onclick qui appelle une fonction pour changer le src de l'image lorsque l'utilisateur clique sur le bouton.

  • Étape 3- Dans la prochaine étape, nous définirons une fonction JavaScript dans laquelle nous obtiendrons l'élément img en utilisant son ID, puis modifierons l'attribut src à l'aide de l'attribut src et basculerons entre les deux images.

  • Étape 4- Dans la dernière étape, nous attribuerons la fonction à l'événement onclick défini dans la dernière étape pour voir les modifications sur l'écran de l'utilisateur.

La traduction chinoise de

Exemple

est :

Exemple

L'exemple suivant vous expliquera comment utiliser réellement l'attribut src en JavaScript pour modifier l'attribut src d'un img.

  

Change the src attribute of an img element

The image shown below will be changed once you click the button.



Copier après la connexion

Dans cet exemple, nous utilisons l'attribut src en JavaScript pour modifier l'attribut src de l'élément img dans le document HTML. Ici, nous basculons entre deux images à chaque fois que vous cliquez sur le bouton.

Utilisation de la méthode attr() dans jQuery

Nous pouvons également utiliser la méthode attr() en JavaScript pour modifier l'attribut src.

Méthode attr()- La méthode attr() accepte deux paramètres, le premier paramètre est le nom de l'attribut à modifier, exprimé sous forme de chaîne, et l'autre paramètre est la nouvelle valeur à attribuer à l'attribut.

Syntaxe

La syntaxe suivante vous expliquera comment la méthode attr() avec paramètres est implémentée −

attr(" attribute_name ", " new_value ");
Copier après la connexion

Comprenons la mise en œuvre de cette approche en détail avec un exemple de code.

Algorithme

À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!