参考资料

  1. HTML DOM删除表格中的行
  2. HTML DOM 返回一个button所属表的ID 实例
  3. HTML DOM 返回image的name
  4. HTML DOM 返回一个表单的name 实例
  5. HTML DOM 返回一个iframe中的longdesc属性的值
  6. HTML DOM 返回图像映射的某个区域的target的值 实例
  7. HTML DOM 对iframe排版
  8. HTML DOM 被按下的键盘键的keycode?

HTML DOM 返回一个button的type 实例

HTML DOM Button type 实例

标签:

用法:

  1. 通过DOM访问按钮类型:
    document.getElementById("myBtn").type

  2. 设置按钮类型:
    document.getElementById("myBtn").type = "submit"

属性值:

  • button:普通按钮(默认)

  • submit:提交表单按钮

  • reset:重置表单按钮

实例:

<button id="myBtn" type="button">点击我</button>

<script>
let btn = document.getElementById("myBtn");
console.log(btn.type); // 输出"button"
btn.type = "submit"; // 修改类型为submit
</script>

功能:

  1. 控制按钮在表单中的行为

  2. 动态修改按钮功能

  3. 区分不同用途的按钮

CSS扩展:

/* 按类型选择按钮 */
button[type="button"] {
  background-color: #4CAF50;
}

button[type="submit"] {
  background-color: #008CBA;
}

button[type="reset"] {
  background-color: #f44336;
}