如何在JavaScript / jQuery中更改img元素的src属性

有多种方法可以使用JavaScript和jQuery更改HTML文档中的img元素的src属性的路径。

使用JavaScript更改img元素的src属性的方法：

使用JavaScript中的src属性。

使用jQuery更改img元素的src属性的方法：

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

让我们逐一讨论上述列出的每种更改img元素src的方法的细节：

使用JavaScript中的src属性

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

语法

以下语法将解释如何使用src属性在JavaScript中更改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属性来更改img的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 − 第一步，我们将在script元素的src中，在文档的head元素中添加jQuery链接
- 步骤2 − 在这一步中，我们将添加一个带有src属性的img元素，稍后将使用jQuery中的attr()方法更改该属性。
- 步骤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()方法的用法。

步骤

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

示例

下面的例子将解释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属性值的三种不同方法。通过在代码示例中实际实现，我们已经详细理解了所有方法，这有助于构建这些概念的实践知识。