HTML DOM 图像对象

htmlweb developmentfront end technology更新于 2025/6/12 17:16:17

HTML DOM 图像对象表示 HTML 文档的 <img> 元素。

创建一个 img 对象 −

语法

以下是 − 的语法

document.createElement(“IMG”);

属性

以下是图像对象的属性 −

属性	说明
alt	返回并修改图片 HTML 元素 alt 属性的值。
complete	返回浏览器是否已完成 HTML 网页中图片的加载。
crossOrigin	返回并修改图片 HTML 元素的 CROS 设置。
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://www.cainiaomax.com/servlets/images/servlets-mini-logo.jpg");
      x.setAttribute("alt", "Learn Servlets");
      document.body.appendChild(x);
   }
</script>
</body>
</html>