HTML DOM Input Image 对象

htmlweb developmentfront end technology更新于 2025/7/1 20:28:17

HTML DOM Input Image 对象表示 HTML 文档中 type="image"的 <input> 元素。

让我们看看如何创建Input Image 对象 −

语法

以下是语法 −

var imageInput = document.createElement(“INPUT”);
imageInput.setAttribute(“type”,”image”);

属性

以下是 HTML DOM Input Image 对象的属性 −

属性	说明
Alt	返回并修改输入图像的 alt 属性值。
Autofocus	返回浏览器是否已完成 HTML 网页中图像的加载。
defaultValue	返回并修改输入图像的默认值。
Disabled	返回并修改输入图像的 disabled 属性值。
Form	返回 HTML 文档中包含输入图像字段的表单的引用。
formAction	返回并修改输入图像的 formaction 属性的值。
formEnctype	返回并修改输入图像的 formenctype 属性的值。
formMethod	返回并修改输入图像的 formmethod 属性的值。
formNoValidate	返回并修改提交时是否验证表单数据。
formTarget	返回并修改输入
Height	返回并修改输入图像高度属性的值。
Name	返回并修改输入图像名称属性的值。
Src	返回并修改输入图像 src 属性的值。
Type	返回输入图像类型属性的值。
Value	返回并修改输入图像值属性的内容。
Width	返回并修改输入图像宽度属性的值。

示例

让我们看一个Input Image 对象的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   .btn{
      background-color:#db133a;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input Image Object Example</h1>
<button onclick="createIframe()" class="btn">Create an image submit button</button>
<script>
   function createIframe() {
      var imageInput = document.createElement("INPUT");
      imageInput.setAttribute("type", "image");
      imageInput.setAttribute("src", "https://www.cainiaomax.com/jdbc/images/jdbc-mini-logo.jpg");
      document.body.appendChild(imageInput);
   }
</script>
</body>
</html>