Maison >interface Web >js tutoriel >Comment changer l'attribut src d'un élément img en JavaScript/jQuery ?

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

WBOYavant: 2023-08-23 16:49:142677parcourir

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ément Comment 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 ";

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.

<html>
<body>
   <h2>Change the src attribute of an img element</h2>
   <p id = "upper">The image shown below will be changed once you click the button.</p>
   <img src =  "https://img.php.cn/" id = "image"> <br> <br>
   <button id = "btn" onclick = "changeSrc()">Click to change the Image</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeSrc() {
         var img = document.getElementById('image');
         if (img.src == "https://img.php.cn/") {
            img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
            result.innerHTML += " The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>";
         }
         else {
            img.src = "https://img.php.cn/";
            result.innerHTML += " The src of above img is changed from <b> Link 2 </b> to " + " <b> Link 1 </b> <br>";
         }
         upper.innerHTML = " The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ";
      }
   </script>
</body>
</html>

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 ");

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

Algorithme

Étape - Dans l'élément
de l'élément <script> du document, nous ajouterons le lien jQuery <src> </script>
Étape 2 - Dans cette étape, nous utiliserons un élément img avec un attribut src et utiliserons plus tard la méthode attr() de jQuery pour le modifier
Étape 3 - Dans la troisième étape, nous ajouterons un élément bouton qui recevra plus tard un événement onclick et une fonction utilisant jQuery
Étape 4 - Dans l'étape suivante, nous utiliserons la syntaxe « $ » de jQuery pour obtenir chaque élément et effectuer des tâches sur chaque élément.
Étape 5 − Dans la dernière étape, nous utiliserons la méthode on() de jQuery pour attribuer un événement onclick au bouton, de sorte que lorsque l'utilisateur clique sur le bouton, il appelle la fonction qui y est donnée et changer le Visible pour l'utilisateur.

Exemple

est :

Exemple

L'exemple suivant illustrera l'utilisation de la méthode attr() dans jQuery pour modifier l'attribut src de l'élément img :

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
   <h2>Change the src attribute of an img element using jQuery</h2>
   <p id = "upper">The image shown below will be changed once you click the button.</p>
   <img src = "https://img.php.cn/" id = "image"> <br> <br>
   <button id = "btn">Click to change the Image</button>
   <p id = "result"> </p>
   <script>
      $("#btn").on('click', function (e) {
         $('#image').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
         $("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
         $("#upper").html(" The image shown previously is replaced by some other image as <b> the src attribute of img is changed. </b> <br> ");
      });
   </script>
</body>
</html>

Utilisez la méthode prop() dans jQuery

Semblable à la méthode attr(), jQuery fournit également la méthode prop() pour modifier la valeur de n'importe quel attribut en une nouvelle valeur.

Méthode prop() - La méthode prop() peut être utilisée comme nous avons utilisé la méthode attr() dans l'exemple précédent. Elle prend le nom de la propriété et la nouvelle valeur à attribuer comme paramètres.

Nous pouvons définir la valeur sur une propriété unique et plusieurs propriétés à l'aide de la méthode prop().

Syntaxe

La syntaxe suivante vous montrera comment utiliser la méthode prop() à différentes fins −

Modifier la valeur d'un attribut spécifique −

prop(" attribute_name ", " new_value ");

Modifier la valeur de plusieurs propriétés −

prop({ attribute_name: new_value, attribute_name: new_value });

Dans la deuxième syntaxe, nous fournissons plusieurs propriétés avec leurs nouvelles valeurs en même temps.

Comprenons en détail l'utilisation de la méthode prop() à travers des exemples de code.

Algorithme

L'algorithme de cet exemple est presque similaire à l'algorithme de l'exemple précédent. Il vous suffit de remplacer la méthode attr() de l'algorithme précédent par la méthode prop() et le travail sera terminé.

La traduction chinoise de

Exemple

est :

Exemple

L'exemple suivant vous expliquera comment la méthode prop() modifie la valeur de l'attribut src de l'élément img dans un document HTML -

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
   <h2>Changing the src attribute of an img element using jQuery</h2>
   <p id = "upper">The image shown below will be changed once you click the button.</p>
   <img src="https://img.php.cn/" id = "image"> <br> <br>
   <button id = "btn">Click to change the Image</button>
   <p id = "result"> </p>
   <script>
      $("#btn").on('click', function (e) {
         $('#image').prop("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
         $("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
         $("#upper").html(" The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ");
      });
   </script>
</body>
</html>

Dans l'exemple ci-dessus, nous avons utilisé la méthode prop() dans jQuery pour modifier l'attribut src de l'élément img dans le document HTML.

Dans cet article, nous avons discuté des trois méthodes différentes pour modifier la valeur de l'attribut src d'un élément img à l'aide de JavaScript ainsi que de jQuery. Nous avons compris toutes les méthodes en détail en les implémentant pratiquement dans les exemples de code, ce qui aide à développer la connaissance pratique des concepts.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un rectangle qui attend que le curseur passe sur un objet à l'aide de FabricJS ?Article suivant：Comment créer un rectangle qui attend que le curseur passe sur un objet à l'aide de FabricJS ?

Articles Liés

Voir plus