参考资料

  1. HTML DOM 鼠标的坐标?
  2. HTML DOM 获取第一个链接ID的实例
  3. HTML DOM 返回图像映射的某个区域的port 实例
  4. HTML DOM 返回一个客户端图像映射的usemap的值
  5. HTML DOM 设置image的hspace和vspace属性
  6. HTML DOM 返回一个区域的href属性的锚部分实例
  7. HTML DOM删除下拉列表中的选项
  8. HTML DOM 返回一个iframe中的marginwidth属性的值

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

声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。