参考资料

1. HTML DOM 返回图像映射的某个区域的protocol 实例
2. HTML DOM 返回image的longdesc属性的值
3. HTML DOM添加表格中的行
4. HTML DOM 返回一个区域的href属性的锚部分实例
5. HTML DOM 返回文档中第一个图像的ID
6. HTML DOM 返回和设置链接的charset属性实例
7. HTML DOM禁用和启用下拉列表
8. HTML DOM指定表格的frame

HTML DOM 返回一个button的name 实例

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;
}