HTML DOM教程 27-HTML DOM Button 對象

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>

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

</body>

</html>

6:form 屬性

 

下面的例子可返回包含按鈕的表單的 id：

<html>

<body>

<form id="form1">
<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>

</body>

</html>

 

7：blur() 方法 

下面的例子將會使按鈕獲得焦點或失去焦點：

<html>

<head>

<script type="text/javascript">

function setFocus()  {
  　　document.getElementById('button1').focus()
  }
function removeFocus()  {
  　　document.getElementById('button1').blur()
  }

</script>

</head>
<body>

<form>

<input type="button" id="button1" value="Button1" />
<br /><br />
<input type="button" onclick="setFocus()" value="Set focus" />
<input type="button" onclick="removeFocus()" value="Remove focus" />

</form>

</body>

</html>