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.com/servlets/images/servlets-mini-logo.jpg");
      x.setAttribute("alt", "Learn Servlets");
      document.body.appendChild(x);
   }
</script>
</body>
</html>