数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML DOM 图片输入对象
HTML DOM 图片输入对象表示HTML文档中type=”image”的<input>元素。
让我们看看如何创建图片输入对象：
语法
以下是语法：
var imageInput = document.createElement(“INPUT”); imageInput.setAttribute(“type”,”image”);
属性
以下是HTML DOM 图片输入对象的属性：
| 属性 | 解释 |
|---|---|
| Alt | 返回并修改图片输入的alt属性值。 |
| Autofocus | 返回浏览器是否已完成HTML网页中图片的加载。 |
| defaultValue | 返回并修改图片输入的默认值。 |
| Disabled | 返回并修改图片输入的disabled属性值。 |
| Form | 返回包含HTML文档中图片输入字段的表单的引用。 |
| formAction | 返回并修改图片输入的formaction属性值。 |
| formEnctype | 返回并修改图片输入的formenctype属性值。 |
| formMethod | 返回并修改图片输入的formmethod属性值。 |
| formNoValidate | 返回并修改提交时是否应验证表单数据。 |
| formTarget | 返回并更改图片输入的formtarget属性值。 |
| Height | 返回并修改图片输入的高度属性值。 |
| Name | 返回并更改图片输入的name属性值。 |
| Src | 返回并修改图片输入的src属性值。 |
| Type | 返回图片输入的type属性值。 |
| Value | 返回并修改图片输入的value属性内容。 |
| Width | 返回并修改图片输入的width属性值。 |
示例
让我们来看一个图片输入对象的示例：
<!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://tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
document.body.appendChild(imageInput);
}
</script>
</body>
</html>输出
这将产生以下输出：
点击“**创建图片提交按钮**”按钮来创建一个图片输入对象：
更新于：2019年7月30日
141 次查看
广告