参考资料

1. HTML DOM 返回一个区域的href属性的querystring部分 实例
2. HTML DOM弹出下拉列表中所有选项
3. HTML DOM 返回一个表单中元素的数量 实例
4. HTML DOM为表格指定规则
5. HTML DOM添加表格中的行
6. HTML DOM 返回页面上所有相对链接的基链接 实例
7. HTML DOM 返回文档中的所有cookies的名称/值对 实例
8. HTML DOM 哪个鼠标键被点击了？

HTML DOM 返回一个button的value 实例

HTML DOM Button value 属性

简介

value 属性设置或返回按钮元素的 value 属性值，这个值在表单提交时会发送到服务器。

标签

适用于 <button>、<input type="button">、<input type="submit"> 和 <input type="reset"> 元素。

用法

// 获取按钮的value值
var btnValue = document.getElementById("myButton").value;

// 设置按钮的value值
document.getElementById("myButton").value = "新值";

实例

<button id="myBtn" value="点击我">按钮</button>

<script>
// 获取按钮value
var btn = document.getElementById("myBtn");
alert(btn.value); // 显示"点击我"

// 修改按钮value
btn.value = "新文本";
</script>

功能

• 获取或设置按钮元素的value属性

• 对于表单提交按钮，value会作为提交数据的一部分

• 不影响按钮上显示的文字（对于button元素）

CSS扩展

可以通过CSS样式化按钮：

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

button:active {
  background-color: #3e8e41;
  transform: translateY(1px);
}