参考资料

1. HTML DOM获得下拉列表的选项数量
2. HTML DOM指定表格的frame
3. HTML DOM 返回图像映射某个区域的坐标实例
4. HTML DOM 返回文档中第一个锚的 innerHTML
5. HTML DOM 返回图像映射的某个区域的shape 实例
6. HTML DOM 返回文档中的图像数
7. HTML DOM 重置表单
8. HTML DOM 打开输出流，向流中输入文本实例

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