如何在JavaScript / jQuery中更改img元素的src属性？-js教程-PHP中文网

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

WBOY

发布： 2023-08-23 16:49:14

转载

4745人浏览过

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

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

使用JavaScript中的src属性。

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

使用 attr() 方法

立即学习“Java免费学习笔记（深入）”；
使用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()方法的实现方式−

讯飞智作-讯飞配音

讯飞智作是一款集AI配音、虚拟人视频生成、PPT生成视频、虚拟人定制等多功能的AI音视频生产平台。已广泛应用于媒体、教育、短视频等领域。

查看详情

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属性。

In this article, we have discussed about the three different methods of changing the value of the src attribute of an img element using the JavaScript as well as jQuery. We have understand all the methods in details by practically implementing them inside the code examples, which helps to build the practical knowledge of the concepts.

以上就是如何在JavaScript / jQuery中更改img元素的src属性？的详细内容，更多请关注php中文网其它相关文章！