搜索

首页 >web前端 >js教程 >如何在JavaScript / jQuery中更改img元素的src属性？

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

WBOY
WBOY转载
2023-08-23 16:49:142674浏览

使用JavaScript和jQuery，有不同的方法来更改在HTML文档中给出的如何在JavaScript / jQuery中更改img元素的src属性？元素的src属性的图像路径。

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

  • 使用JavaScript中的src属性。

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

  • 使用 attr() 方法

  • 使用prop()方法

让我们逐一详细讨论上述列出的更改img元素src的方法。

在JavaScript中使用src属性

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

Syntax

以下语法将向您解释如何在JavaScript中使用src属性来更改img元素的src属性的值 -

Selected_image_element.src = " new value ";

让我们通过代码示例来理解这种方法的实际实现。

算法

  • Step 1 − In the first step, we will add a img element with a src attribute associated with it, whose value we will change later using the src property in JavaScript.

  • 第二步 - 在这一步中，我们将添加一个带有onclick事件的按钮元素，当用户点击按钮时调用一个函数来改变图像的src。

  • 步骤 3 - 在下一步中，我们将定义一个 JavaScript 函数，在该函数中，我们将使用其 ID 获取 img 元素，然后使用 src 属性更改 src 属性，并在两个图像之间切换。

  • Step 4 − In the last step, we will assign the function to the onclick event defined in the last step to see the changes on user screen.

Example

的中文翻译为：

示例

下面的示例将向您解释如何在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://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>

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

在jQuery中使用attr()方法

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

attr()方法 - attr()方法接受两个参数，第一个参数是要更改的属性名称，以字符串形式表示，另一个参数是要分配给属性的新值。

Syntax

以下语法将向您解释带有参数的attr()方法的实现方式−

attr(" attribute_name ", " new_value ");

让我们通过代码示例详细了解这种方法的实现。

算法

  • 第一步 - 在文档的

    元素中的<script>元素的<src>中，我们将添加jQuery链接</script>

  • 第二步 - 在这一步中，我们将使用一个带有src属性的img元素，并在后续使用jQuery的attr()方法来修改它

  • 第三步 - 在第三步中，我们将添加一个按钮元素，该元素将在稍后使用jQuery给予一个onclick事件和一个函数

  • 第四步 − 在下一步中，我们将使用jQuery的“$”语法获取每个元素，并对每个元素执行任务。

  • 第五步 − 在最后一步中，我们将使用jQuery的on()方法为按钮分配一个onclick事件，这样当用户点击按钮时，它会调用其中给定的函数，并且更改对用户可见。

Example

的中文翻译为：

示例

下面的示例将说明在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://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>

使用jQuery中的prop()方法

与attr()方法类似，jQuery还提供了prop()方法来将任何属性的值更改为新值。

prop() method − The prop() method can be used as we used the attr() method in previous example. It takes property name and the new value to be assigned as parameters.

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

Syntax

Following syntax will show you how you can use the prop() method for different purposes −

更改特定属性的值 −

prop(" attribute_name ", " new_value ");

更改多个属性的值 −

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

在第二种语法中，我们同时为多个属性提供了它们的新值。

让我们通过代码示例详细了解prop()方法的用法。

算法

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

Example

的中文翻译为：

示例

下面的示例将向您解释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://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>

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

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

以上是如何在JavaScript / jQuery中更改img元素的src属性？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除
上一篇：如何使用 FabricJS 创建一个等待光标悬停在对象上的矩形？下一篇：如何使用 FabricJS 查找 Polygon 对象的平移矩阵？

相关文章

查看更多