HTML DOM Button用法及代碼示例

HTML DOM Button 對象與 <button> 元素相關聯。

特性

以下是 HTML DOM 按鈕對象的屬性 -

屬性	描述
autofocus	設置或返回頁麵加載時按鈕是否自動聚焦。
disabled	設置或返回給定按鈕是否被禁用。
form	返回包含按鈕的表單的引用。
formAction	設置或返回按鈕的 formAction 屬性值。
formEnctype	設置或返回按鈕的 formEnctype 屬性值。
formMethod	設置或返回按鈕的 formMethod 屬性值。
formNoValidate	設置或返回表單數據是否應在提交時進行驗證。
formTarget	設置或返回按鈕的 formTarget 屬性值。
name	設置或返回按鈕的名稱屬性值。
type	設置或返回按鈕類型。
value	設置或返回按鈕值。

用法

以下是語法 -

創建一個按鈕對象 -

var x = document.createElement("BUTTON");

示例

讓我們看一個 HTML DOM 按鈕對象的例子 -

<!DOCTYPE html>
<html>
<body>
<p>Click on the below button to create a BUTTON element</p>
<button onclick="buttonCreate()">CREATE</button>
<br><br>
<script>
   function buttonCreate() {
      var x = document.createElement("BUTTON");
      var t = document.createTextNode("NEW BUTTON");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊創建 -

在上麵的例子中 -

我們首先創建了一個按鈕元素 CREATE。單擊此按鈕將執行 buttonCreate() 函數。

<button onclick="buttonCreate()">CREATE</button>

buttonCreate() 方法使用文檔對象的 createElement() 方法創建按鈕元素並將其分配給變量 x。使用 create 元素創建文本節點並分配給變量 t。然後使用 appendchild 方法將文本節點 t 附加到按鈕。然後使用 document.body.appendChild() 方法將按鈕及其子文本節點作為子節點附加到文檔正文。

function buttonCreate() {
   var x = document.createElement("BUTTON");
   var t = document.createTextNode("NEW BUTTON");
   x.appendChild(t);
   document.body.appendChild(x);
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM Button object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。