HTML DOM Button name属性用法及代码示例

HTML DOM 按钮名称属性与 <button> 元素的名称属性相关联。 name 属性用于设置或返回按钮的 name 属性的值。 name 属性在表单中用于使用 JavaScript 选择元素。

用法

以下是语法 -

设置名称属性 -

buttonObject.name = name

这里，name 属性值用于表示按钮的名称。

示例

让我们看一个按钮名称属性的例子 -

<!DOCTYPE html>
<html>
<body>
<button id="button1" name="btn1">BUTTON</button>
<p>Click the button below and change the above button name.</p>
<button onclick="change()">CHANGE</button>
<p id="Sample"></p>
<script>
   function change() {
      document.getElementById("button1").name="SECOND BUTTON";
      var x=document.getElementById("button1").name;
      document.getElementById("Sample").innerHTML="The new button name is "+x;
   }
</script>
</body>
</html>

输出

这将产生以下输出 -

单击更改 -

在上面的例子中 -

我们首先创建了一个按钮，id 为 “button1”，名称为 “btn1”

<button id="Button1">BUTTON</button>

然后我们创建了 CHANGE 按钮，该按钮在单击时执行方法 change()。

<button onclick="change()">CHANGE</button>

change() 函数获取 id 为 “button1” 的按钮元素，并将其 name 属性值更改为 “SECOND BUTTON”。然后将按钮的名称值赋给变量 x 并最终显示在 id 为 “Sample” 的段落中

function change() {
   document.getElementById("button1").name="SECOND BUTTON";
   var x=document.getElementById("button1").name;
   document.getElementById("Sample").innerHTML="The new button name is "+x;
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM Button name Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。