HTML DOM教程 27-HTML DOM Button 对象
1：Button 对象
Button 对象代表 HTML 文档中的一个按钮。
该元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。
在 HTML 文档中 <input type="button"> 标签每出现一次，一个 Button 对象 就会被创建。
您可以通过遍历表单的 elements[] 数组来访问某个按钮，或者通过使用 document.getElementById()。
2：Button 对象的属性
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| accessKey | 设置或返回访问按钮的快捷键。 | 5 | 1 | 9 | Yes |
| alt | 设置或返回当浏览器无法显示按钮时供显示的替代文本。 | 5 | 1 | 9 | Yes |
| disabled | 设置或返回是否禁用按钮。 | 5 | 1 | 9 | Yes |
| form | 返回对包含该按钮的表单对象的引用。 | 4 | 1 | 9 | Yes |
| id | 设置或返回按钮的 id。 | 4 | 1 | 9 | Yes |
| name | 设置或返回按钮的名称。 | 4 | 1 | 9 | Yes |
| tabIndex | 设置或返回按钮的 tab 键控制次序。 | 5 | 1 | 9 | Yes |
| type | 返回按钮的表单元素类型。 | 4 | 1 | 9 | Yes |
| value | 设置或返回在按钮上显示的文本。 | 4 | 1 | 9 | Yes |
3：Standard Properties
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| className | Sets or returns the class attribute of an element | 5 | 1 | 9 | Yes |
| dir | Sets or returns the direction of text | 5 | 1 | 9 | Yes |
| lang | Sets or returns the language code for an element | 5 | 1 | 9 | Yes |
| title | Sets or returns an element's advisory title | 5 | 1 | 9 | Yes |
4：Button 对象的方法
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| blur() | 把焦点从元素上移开。 | 4 | 1 | 9 | Yes |
| click() | 在某个按钮上模拟一次鼠标单击。 | 4 | 1 | 9 | Yes |
| focus() | 为某个按钮赋予焦点。 | 4 | 1 | 9 | Yes |
5：accessKey 属性
注释：当某个元素拥有快捷键时，只需按下 Alt + accessKey，该元素便会获得焦点。
下面的例子可返回一个按钮的快捷键：
<html>
<body>
<form></body>
<input type="button" value="Click me!" accesskey="b" id="button1" /></form>
<p>AccessKey for button is:
<script type="text/javascript">
x=document.getElementById('button1');
document.write(x.accessKey);
</script>
</p>
</html>
6:form 属性
下面的例子可返回包含按钮的表单的 id：
<html>
<body>
<form id="form1"></body>
<input type="button" value="Click me!" id="button1" />
</form>
<p>The id of the form containing the button is:
<script type="text/javascript">
x=document.getElementById('button1');
document.write(x.form.id);
</script>
</p>
</html>7：blur() 方法
下面的例子将会使按钮获得焦点或失去焦点：
<html>
<head></html>
<script type="text/javascript"></head>
function setFocus() {</script>
document.getElementById('button1').focus()
}
function removeFocus() {
document.getElementById('button1').blur()
}
<body>
<form></body>
<input type="button" id="button1" value="Button1" /></form>
<br /><br />
<input type="button" onclick="setFocus()" value="Set focus" />
<input type="button" onclick="removeFocus()" value="Remove focus" />