recherche

Maison >interface Web >Questions et réponses frontales >Comment modifier une image img avec jquery

Comment modifier une image img avec jquery

PHPz
PHPzoriginal
2023-04-26 14:22:241663parcourir

jQuery est une bibliothèque JavaScript largement utilisée dans le développement front-end. Elle fournit une API riche qui peut facilement exploiter des éléments HTML. En développement front-end, il est souvent nécessaire de modifier les images sur les pages Web. Cet article explique comment utiliser jQuery pour modifier l'attribut src de l'élément

1. Utilisez la méthode .attr() pour modifier l'attribut src de l'image

jQuery fournit la méthode .attr() pour obtenir ou définir la valeur d'attribut de l'élément HTML. Cette méthode peut modifier l'attribut src de l'élément Voici un exemple de code simple : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery修改图片</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //点击按钮时，修改图片的src属性
            $("#btn").click(function(){
                $("img").attr("src","new_image.jpg");
            });
        });
    </script>
</head>
<body>
    <img src="old_image.jpg">
    <button id="btn">替换图片</button>
</body>
</html>

Dans le code ci-dessus, l'attribut src de l'image est modifié en cliquant sur le bouton. Lors de l'utilisation de la méthode .attr(), le premier paramètre est le nom de l'attribut à modifier et le deuxième paramètre est la valeur de l'attribut à définir. Après avoir exécuté le code, cliquez sur le bouton pour remplacer l'image par une nouvelle image nommée "new_image.jpg". Notez que vous devez vous assurer que le nouveau fichier image existe et se trouve dans le même répertoire que l'ancien fichier image.

2. Utilisez la méthode .prop() pour modifier l'attribut src de l'image

En plus d'utiliser la méthode .attr(), vous pouvez également utiliser la méthode .prop() pour modifier l'attribut src de l'image. . La méthode .prop() est utilisée pour obtenir ou définir la valeur d'un attribut. En même temps, elle peut également être utilisée pour modifier les attributs inhérents aux éléments HTML, tels que les attributs .disabled et .checked. Voici un exemple d'utilisation de la méthode .prop() pour implémenter le remplacement d'image : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery修改图片</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //点击按钮时，修改图片的src属性
            $("#btn").click(function(){
                $("img").prop("src","new_image.jpg");
            });
        });
    </script>
</head>
<body>
    <img src="old_image.jpg">
    <button id="btn">替换图片</button>
</body>
</html>

Le code ci-dessus est fondamentalement le même que l'exemple utilisant la méthode .attr(). La seule différence est que vous utilisez la méthode .prop() pour modifier l'attribut src de l'image. De même, cliquer sur le bouton remplace l'image par une nouvelle image nommée "new_image.jpg".

Résumé

Cet article présente deux méthodes de remplacement d'images en modifiant l'attribut src de l'élément Cette fonction peut être réalisée en utilisant à la fois la méthode .attr() et la méthode .prop(). Quelle que soit la méthode que vous choisissez, vous devez d'abord utiliser le sélecteur pour sélectionner l'élément d'image à modifier, puis utiliser la méthode correspondante pour modifier son attribut src. Il convient de noter que la nouvelle image remplacée doit se trouver dans le même répertoire, sinon elle ne sera pas affichée.

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：
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
Article précédent：Comment demander des données sur plusieurs domaines avec le front-end jqueryArticle suivant：Comment demander des données sur plusieurs domaines avec le front-end jquery

Articles Liés

Voir plus