HTML DOM中的Input Image对象用于表示type =“ image”的HTML <input>元素。该标签用于访问或创建元素。可以使用getElementById()方法访问此元素。
用法:
document.getElementById("MyImage");
返回值:它返回type =“ image”的<input>标签的属性。
属性值:
值 | 描述 |
---|---|
alt | 设置/返回输入图像的alt属性的值。 |
autofocus | 设置/返回页面加载时输入图像是否自动获得焦点。 |
defaultValue | 设置/返回输入图像的默认值。 |
disabled | 设置/返回是否禁用输入图像。 |
form | 返回包含输入图像的表单的引用。 |
formAction | 设置/返回输入图像的formaction属性的值。 |
formEnctype | 设置/返回输入图像的formenctype属性的值。 |
formMethod | 设置/返回输入图像的formmethod属性的值。 |
formNoValidate | 设置/返回提交时是否验证form-data。 |
formTarget | 设置/返回输入图像的formtarget属性的值。 |
height | 设置/返回输入图像的height属性值。 |
name | 设置/返回输入图像的名称属性的值。 |
src | 设置/返回输入图像的src属性值。 |
type | 返回输入元素的表单元素的类型。 |
value | 设置/返回输入图像的value属性的值。 |
width | 设置/返回输入图像的width属性值。 |
示例1:访问输入元素并返回ID,类型和宽度。
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Image Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Image Object</h2>
<button onclick="my_geek()">
<input id="myImage"
type="image"
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
alt="Submit"
width="48"
height="48">
</button>
<h2 id="Geek_h" style="color:green;">
</h2>
<script>
function my_geek() {
// Access myImage and return id
var txt = document.getElementById(
"myImage").id;
txt = "id = " + txt + ", ";
// Return type
txt += "type = " + document.getElementById(
"myImage").type + ", ";
// Return Width
txt += "width = " + document.getElementById(
"myImage").width;
document.getElementById(
"Geek_h").innerHTML = txt;
}
</script>
</body>
</html>
输出
-
在单击按钮之前:
-
单击按钮后:
示例-2:访问输入元素并返回目标,高度和高度。
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Image Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Image Object</h2>
<button onclick="my_geek()">
<input id="myImage"
type="image"
formtarget="#"
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
alt="Submit"
width="48"
height="48">
</button>
<h2 id="Geek_h" style="color:green;">
</h2>
<script>
function my_geek() {
// Return target, alt and height.
var txt = document.getElementById(
"myImage").formTarget;
txt = "formTarget = " + txt + ", ";
txt += "alt = " + document.getElementById(
"myImage").alt + ", ";
txt += "height = " + document.getElementById(
"myImage").height;
document.getElementById(
"Geek_h").innerHTML = txt;
}
</script>
</body>
</html>
输出
-
在单击按钮之前:
-
单击按钮后:
示例3:访问Input元素并返回formTarget,formEnctype和formAction。
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Image Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Input Image Object</h2>
<button onclick="my_geek()">
<input id="myImage"
type="image"
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
alt="Submit"
formaction="#"
formtarget="#"
formenctype="text/plain"
width="48"
height="48">
</button>
<h2 id="Geek_h" style="color:green;">
</h2>
<script>
function my_geek() {
// Return formTarget, formEnctype and formAction.
var txt = document.getElementById(
"myImage").formTarget;
txt = "formTarget = " + txt + ", ";
txt += "formEnctype = " + document.getElementById(
"myImage").formEnctype + ", ";
txt += "formAction = " + document.getElementById(
"myImage").formAction;
document.getElementById(
"Geek_h").innerHTML = txt;
}
</script>
</body>
</html>
输出
-
在单击按钮之前:
-
单击按钮后:
支持的浏览器:
- 谷歌浏览器
- 火狐浏览器
- Edge
- Safari
- Opera
相关用法
- HTML DOM Object用法及代码示例
- HTML DOM Input Week用法及代码示例
- HTML DOM Input Button用法及代码示例
- HTML DOM Input Submit用法及代码示例
- HTML DOM Input URL用法及代码示例
- HTML DOM Input Time用法及代码示例
- HTML DOM Input Hidden用法及代码示例
- HTML DOM Input Range用法及代码示例
- HTML DOM Input Reset用法及代码示例
- HTML DOM Input Number用法及代码示例
- HTML DOM Input Password用法及代码示例
- HTML DOM Input Color用法及代码示例
- HTML DOM Input Datetime用法及代码示例
- HTML DOM Input Month用法及代码示例
- HTML DOM Input Email用法及代码示例
- HTML DOM Input Text用法及代码示例
- HTML DOM Input DatetimeLocal用法及代码示例
- HTML DOM Input Date用法及代码示例
- HTML DOM Input Search用法及代码示例
- HTML DOM Input Radio用法及代码示例
- HTML DOM Input FileUpload用法及代码示例
- HTML DOM Image用法及代码示例
- HTML Input Image src用法及代码示例
- HTML Input Image width用法及代码示例
注:本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Input Image Object。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。