数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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 属性值的一种非常常见的方法。
语法
以下语法将向您解释如何在 JavaScript 中使用 src 属性来更改 img 元素的 src 属性的值 -
Selected_image_element.src = " new value ";
让我们借助代码示例了解此方法的实际实现 -
算法
步骤 1 - 在第一步中，我们将添加一个 img 元素，并将其与一个 src 属性关联，稍后我们将使用 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 - 在第一步中，我们将 jQuery 链接添加到文档的 head 元素中，位于 script 元素的 src 内部
步骤 2 - 在这一步中，我们将添加一个 img 元素，并带有一个 src 属性，该属性稍后将使用 jQuery 中的 attr() 方法更改。
步骤 3 - 在第三步中，我们将添加一个按钮元素，该元素稍后将使用 jQuery 获取 onclick 事件和一个函数。
步骤 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 属性值的三个不同方法。我们通过在代码示例中实际实现所有方法来详细了解所有方法，这有助于构建对这些概念的实践知识。
15K+ 阅读量
