資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML DOM 輸入按鈕物件
HTML DOM 輸入按鈕物件用作具有 “button” 型別的 html 輸入元素。
讓我們看一看如何建立輸入按鈕物件 −
語法
以下是語法 −
var newButton = document.createElement(“INPUT”); newButton.setAttribute(“type”,”value”);
此處，值可以是“button”、“submit”和“reset”。
屬性
以下是輸入按鈕物件的屬性 −
屬性 | 說明 |
|---|---|
| autofocus | 該屬性返回並更改 HTML 輸入按鈕中 autofocus 屬性的值。 |
| defaultValue | 它返回並修改 HTML 輸入按鈕的預設值。 |
| disabled | 它返回並更改 HTML 輸入按鈕中 disabled 屬性的值。 |
| form | 它返回包含輸入按鈕的表單的引用。 |
| name | 它返回並更改 HTML 輸入按鈕中 name 屬性的值。 |
| type | 此屬性返回輸入按鈕的型別，即它屬於“按鈕”型別、“提交”型別還是“重置”型別。 |
| value | 它返回並修改輸入按鈕值屬性的內容。 |
示例
我們來看一個 DOM 輸入按鈕物件的示例 −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Input Button Object</title>
<style>
body{
text-align:center;
}
.btn{
display:block;
margin:1rem auto;
background-color:#db133a;
color:#fff;
border:1px solid #db133a;
padding:0.5rem;
border-radius:50px;
width:60%;
font-weight:bold;
}
.show-msg{
font-weight:bold;
font-size:1.4rem;
color:#ffc107;
}
</style>
</head>
<body>
<h1>Input Button Object Example</h1>
<input type="button" onclick="createReplica()" class="btn" value="Click to replicate
me">
<div class="show-msg"></div>
<script>
function createReplica() {
var newButton = document.createElement("INPUT");
newButton.setAttribute("type","button");
newButton.setAttribute("class","btn");
newButton.setAttribute("value","Click to replicate me");
newButton.setAttribute("onclick","createReplica()");
document.body.appendChild(newButton);
}
</script>
</body>
</html>輸出
這將生成以下輸出 −
點選“點選以複製我”按鈕來建立該按鈕的新副本。
更新於： 12-6-2020
178 瀏覽量
廣告