HTML - DOM src 屬性

HTML DOM 的src 屬性用於獲取（檢索）或設定（更新）HTML 中影像（<img>）元素的源。

它返回影像當前的源 URL，修改後，它會更新影像的“src”屬性，允許您動態更改原始檔、路徑或連結目標。

語法

以下是 HTML DOM 的src（獲取 src 屬性）屬性的語法：

imageObject.src

要更新（設定）src 屬性，請使用以下語法：

imageObject.src = new_source

引數

因為它是一個屬性，所以它不接受任何引數。

返回值

此屬性將影像元素的當前源作為字串返回。

示例 1：檢索“img”元素的當前源

以下是 HTML DOM src 屬性的基本示例。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM src</title>
</head>
<body>
<p>The source of an image is displaed below: </p>
<p>My Image: </p>
<img src ="https://tutorialspoint.tw/images/logo.png" id="my_img">
<p id="result"></p>
<script>
   let my_img = document.getElementById("my_img");
   document.getElementById('result').innerHTML = "The source of the above image is: " + my_img.src;
</script>
</body>
</html>

示例 2：更新“img”元素的當前源

這是另一個使用 HTML DOM src 屬性的示例。我們使用此屬性來更新（更改）影像的源：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM src</title>
<style>
   img{
      width: 300px;
      height: 200px;
      border: 2px solid green;
      border-radius: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to update the source of an image:</p>
<p>My Image: </p>
<img src ="https://tutorialspoint.tw/images/logo.png" id="my_img"><br><br>
<button id="change_btn">Update</button>
<p id="result"></p>
<script>
   document.getElementById('change_btn').addEventListener("click", ()=>{
      let my_img = document.getElementById("my_img");
      my_img.src = "https://tutorialspoint.tw/static/images/hero.png";
      document.getElementById('result').innerHTML = "The source of an image has been updated...";
   });
</script>
</body>
</html>

支援的瀏覽器

屬性
值	是	是	是	是	是

列印頁面