HTML DOM 圖片物件

HTML DOM 圖片物件代表 HTML 文件中的 <img> 元素。

讓我們建立一個 img 物件：

語法

以下是語法：

document.createElement(“IMG”);

屬性

以下是圖片物件的屬性：

屬性	解釋
alt	返回並修改圖片 HTML 元素的 alt 屬性值。
complete	返回瀏覽器是否已完成載入 HTML 網頁中的圖片。
crossOrigin	返回並修改圖片 HTML 元素的 CORS 設定。
height	返回並修改圖片 HTML 元素的 height 屬性值。
naturalHeight	返回 HTML 文件中圖片的自然高度。
naturalWidth	返回 HTML 文件中圖片的自然寬度。
src	返回並修改圖片 HTML 元素的 src 屬性值。
useMap	返回並更改圖片 HTML 元素的 useMap 屬性值。
width	返回並更改圖片 HTML 元素的 width 屬性值。
isMap	返回並修改 HTML 文件中的圖片是否為伺服器端影像對映的一部分。

示例

讓我們來看一個 HTML DOM 圖片物件的示例：

線上演示

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
   }
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<button onclick="createIframe()" class="btn">Click me to create an image</button>
<script>
   function createIframe() {
      var x = document.createElement("IMG");
      x.setAttribute("src",https://tutorialspoint.tw/servlets/images/servlets-mini-logo.jpg");
      x.setAttribute("alt", "Learn Servlets");
      document.body.appendChild(x);
   }
</script>
</body>
</html>