参考资料

1. HTML DOM 哪个鼠标键被点击了？
2. HTML DOM 返回image的替代文本
3. HTML DOM 返回和设置链接的hreflang属性实例
4. HTML DOM 返回一个button的name 实例
5. HTML DOM 对image排版
6. HTML DOM 返回图像映射某个区域的替代文字实例
7. HTML DOM 返回加载的文档的服务器域名 实例
8. HTML DOM 改变链接的target属性实例

HTML DOM 获取 button 的 name 属性

详细介绍

HTML DOM 中的 name 属性用于获取或设置按钮元素的名称。这个属性通常用于表单提交时标识按钮，或者在 JavaScript 中引用特定的按钮元素。

标签

<button> 标签的 name 属性：

<button name="buttonName">Click me</button>

用法

获取 button 的 name 属性：

var buttonName = document.getElementById("myButton").name;

设置 button 的 name 属性：

document.getElementById("myButton").name = "newName";

实例

<button id="submitBtn" name="submitButton">Submit Form</button>

<script>
  var btn = document.getElementById("submitBtn");
  console.log(btn.name); // 输出: "submitButton"
  
  btn.name = "newSubmitButton";
  console.log(btn.name); // 输出: "newSubmitButton"
</script>

功能

1. 标识表单中的按钮

2. 在表单提交时作为名称/值对发送到服务器

3. 在 JavaScript 中用于识别特定按钮

CSS 扩展

虽然 name 属性主要用于功能而非样式，但可以通过 CSS 属性选择器基于 name 值来设置样式：

button[name="submitButton"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
}

button[name="cancelButton"] {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
}