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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。