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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。