参考资料

1. HTML DOM 返回一个button所属表的ID 实例
2. HTML DOM 返回和设置链接的hreflang属性实例
3. HTML DOM 返回文档的完整的URL实例
4. HTML DOM 返回加载的文档的服务器域名 实例
5. HTML DOM单元格内容垂直对齐
6. HTML DOM 提交表单
7. HTML DOM 返回表单中的enctype属性的值
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);
}