資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
