JavaScript/jQuery 如何改变一个img元素的src属性

有不同的方法来改变HTML文档中 img 元素的 src 属性中的图片路径，使用JavaScript以及jQuery。

使用JavaScript改变img元素的src属性的方法 —

使用JavaScript中的src属性。

使用jQuery改变图片元素的src属性的方法—-。

使用attr()方法
使用 prop()方法

让我们逐一讨论以上列出的改变img元素src属性的方法，具体如下

在JavaScript中使用src属性

JavaScript允许我们使用src属性来获取已经分配给它的值，以及更新或改变同一属性的值。这是很常见的改变img元素src属性值的方法。

语法

下面的语法将解释如何在JavaScript中使用src属性来改变一个img元素的src属性的值。

Selected_image_element.src = " new value ";

让我们借助于代码实例来了解这个方法的实际执行情况 −

算法

第1步 -- 在第1步中，我们将添加一个带有src属性的img元素，这个属性的值我们将在后面使用JavaScript中的src属性来改变。
第2步– 在这一步，我们将添加一个与onclick事件相关的按钮元素，当用户点击按钮时调用一个函数来改变图片的src。
第 3步– 在下一步中，我们将定义一个JavaScript函数，在这个函数中，我们将使用其ID抓取img元素，然后使用src属性改变src属性，在两张图片之间切换。
第4步 – 在最后一步，我们将把这个函数分配给上一步定义的onclick事件，以看到用户屏幕上的变化。

例子

下面的例子将解释如何在JavaScript中使用src属性来改变图片的src属性。

<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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" 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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU") {
            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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU";
            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>

在这个例子中，我们使用了JavaScript中的src属性来改变HTML文档中img元素的src属性。在这里，每当我们点击按钮时，我们就在两张图片之间切换。

在jQuery中使用attr()方法

我们也可以使用JavaScript中的attr()方法来改变src属性。

attr( )方法 - attr()方法需要两个参数，第一个参数是我们想要改变的字符串形式的属性名称，另一个是我们想要分配给该属性的新值。

语法

下面的语法将向你解释attr()方法的实现，该方法的参数为

attr(" attribute_name ", " new_value ");

让我们借助代码实例来详细了解这个方法的实现。

算法

第1步 -- 在第1步中，我们将在文档的 head 元素中的 script 元素的 src 中添加jQuery链接。
第2步 – 在这一步，我们将添加一个带有src属性的img元素，这个属性将在以后使用jQuery的attr()方法来改变。
第3步 – 在第3步中，我们将添加一个按钮元素，它将被赋予一个onclick事件和一个jQuery的函数。
第 4步 – 在下一步中，我们将使用jQuery的” $” 语法抓取每个元素，并对它们中的每一个执行任务。
第5步 – 在最后一步，我们将使用jQuery中的 on() 方法给按钮分配一个onclick事件，这样当按钮被点击时，它就可以调用里面的函数，而这些变化对用户来说是可见的。

例子

下面的例子将说明如何使用jQuery中的attr()方法来改变一个img元素的src属性。

<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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" 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>

在jQuery中使用prop()方法

类似于attr()方法，jQuery也为我们提供了一个prop()方法来改变任何属性的值，使其成为一个新的值。

prop( )方法 - prop()方法可以像我们在前面的例子中使用attr()方法一样使用。它接受属性名称和要分配的新值作为参数。

我们可以使用 prop() 方法为单个或多个属性设置值。

语法

下面的语法将告诉你如何将prop()方法用于不同的目的。

改变一个特定属性的值

prop(" attribute_name ", " new_value ");

改变多个属性的值 –

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

在第二种语法中，我们同时给出多个属性及其相关的新值。

让我们在代码示例的帮助下详细了解prop()方法的使用。

算法

这个例子的算法与上一个例子的算法几乎相似。你只需要用prop()方法替换前面算法中的attr()方法就可以完成工作。

例子

下面的例子将向你解释prop()方法是如何改变HTML文档中img元素的src属性值的。

<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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU" 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>

在上面的例子中，我们使用了jQuery中的prop()方法来改变HTML文档中的img元素的src属性。

在这篇文章中，我们讨论了使用JavaScript和jQuery改变img元素的src属性值的三种不同方法。我们通过在代码实例中实际实现这些方法来详细了解所有的方法，这有助于建立概念的实际知识。