HTML DOM Input Button对象(Input Button Object)

Input Button对象代表了HTML文档中的type="button"的input元素

如何访问Input Button对象?

使用getElementById()方法访问type="button"的input元素。

注:使用form元素的elements收集器也能够访问type="button"的input元素。

var  x = document.getElementById("myBtn");

如何创建Input Button对象

使用createElement()方法创建type="button"的input元素。

var x = document.createElement("input");
x.setAttribute("type", "button");
Input Button对象的属性
属性 说明
autofocus【5】 设置或返回type="button"的input元素的cite属性的值
defaultValue 设置或返回type="button"的input元素的默认值
disabled 设置或返回type="button"的input元素是否被禁用
form 返回包含type="button"的input元素的form引用
name 设置或返回type="button"的input元素的name属性值
type 返回form元素中的按钮的类型
value 设置或返回type="button"的input元素的value属性值

标准属性及事件

input-button对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问按钮?</h3>

<p>点击以下按钮,获取按钮的值</p>

<input type="button" id="myBtn" onclick="myFc()" value="按钮">

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myBtn").value;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建按钮?</h3>

<p>点击以下按钮,创建一个按钮</p>

<input type="button" id="myBtn" onclick="myFc()" value="按钮">

<script>

function myFc() {

var x = document.createElement("INPUT");

x.setAttribute("type", "button");

x.setAttribute("value", "点击");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容