資料結構
網路
關係型資料庫管理系統 (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.tw/jdbc/images/jdbc-mini-logo.jpg");
document.body.appendChild(imageInput);
}
</script>
</body>
</html>輸出
這將產生以下輸出：
點選“**建立圖片提交按鈕**”按鈕來建立一個圖片輸入物件：
更新於：2019年7月30日
141 次檢視
廣告