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" />