首頁 > 開發者 > JavaScript
[注:頁面上元素name屬性和JavaScript引用的名稱必須一致包括大小寫，否則會提示你一個錯誤資訊 “引用的元素為空白或者不是對象”]
========================================================================
對象屬性:
document.title //設定文檔標題等價於HTML的<title>標籤
document.bgColor //設定頁面背景色
document.fgColor //設定前景色彩(文本顏色)
document.linkColor //未點擊過的連結顏色
document.alinkColor //啟用連結(焦點在此連結上)的顏色
document.vlinkColor //已點擊過的連結顏色
document.URL //設定URL屬性從而在同一視窗開啟另一網頁
document.fileCreatedDate //檔案建立日期，唯讀屬性
document.fileModifiedDate //檔案修改日期，唯讀屬性
document.fileSize //檔案大小，唯讀屬性
document.cookie //設定和讀出cookie
document.charset //設定字元集 簡體中文:gb2312
—————————-
常用對象方法:
document.write() //動態向頁面寫入內容
document.createElement(Tag) //建立一個html標籤對象
document.getElementById(ID) //獲得指定ID值的對象
document.getElementsByName(Name) //獲得指定Name值的對象
document.body.appendChild(oTag)
========================================================================
body-主體子物件
document.body //指定文檔主體的開始和結束等價於<body></body>
document.body.bgColor //設定或擷取對象後面的背景顏色
document.body.link //未點擊過的連結顏色
document.body.alink //啟用連結(焦點在此連結上)的顏色
document.body.vlink //已點擊過的連結顏色
document.body.text //文本色
document.body.innerText //設定<body>…</body>之間的文本
document.body.innerHTML //設定<body>…</body>之間的HTML代碼
document.body.topMargin //頁面上邊距
document.body.leftMargin //頁面左邊距
document.body.rightMargin //頁面右邊距
document.body.bottomMargin //頁面下邊距
document.body.background //背景圖片
document.body.appendChild(oTag) //動態產生一個HTML對象
—————————-
常用對象事件:
document.body.onclick=”func()” //滑鼠指標單擊對象是觸發
document.body.onmouseover=”func()” //滑鼠指標移到對象時觸發
document.body.onmouseout=”func()” //滑鼠指標移出對象時觸發
========================================================================
location-位置子物件:
document.location.hash // #號後的部分
document.location.host // 網域名稱+連接埠號碼
document.location.hostname // 網域名稱
document.location.href // 完整URL
document.location.pathname // 目錄部分
document.location.port // 連接埠號碼
document.location.protocol // 網路通訊協定(http:)
document.location.search // ?號後的部分
—————————-
常用對象事件:
documeny.location.reload() //重新整理網頁
document.location.reload(URL) //開啟新的網頁
document.location.assign(URL) //開啟新的網頁
document.location.replace(URL) //開啟新的網頁
========================================================================
selection-選區子物件
document.selection
========================================================================
images集合(頁面中的圖象):
—————————-
a)通過集合引用
document.images //對應頁面上的<img>標籤
document.images.length //對應頁面上<img>標籤的個數
document.images[0] //第1個<img>標籤
document.images[i] //第i-1個<img>標籤
—————————-
b)通過nane屬性直接引用
<img name=”oImage”>
document.images.oImage //document.images.name屬性
—————————-
c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src
—————————-
d)建立一個圖象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同時在頁面上建立一個<img>標籤與之對應就可以顯示
—————————-
範例程式碼(動態建立圖象)：
<html>
<img name=oImage>
<script language=”javascript”>
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
</script>
</html>
<html>
<script language=”javascript”>
oImage=document.caeateElement(”IMG”)
oImage.src=”1.jpg”
document.body.appendChild(oImage)
</script>
</html>
========================================================================
forms集合(頁面中的表單):
—————————-
a)通過集合引用
document.forms //對應頁面上的<form>標籤
document.forms.length //對應頁面上<form>標籤的個數
document.forms[0] //第1個<form>標籤
document.forms[i] //第i-1個<form>標籤
document.forms[i].length //第i-1個<form>中的控制項數
document.forms[i].elements[j] //第i-1個<form>中第j-1個控制項
—————————-
b)通過標籤name屬性直接引用
<form name=”Myform”><input name=”myctrl”></form>
document.Myform.myctrl //document.表單名.控制項名
—————————-
c)訪問表單的屬性
document.forms[i].name //對應<form name>屬性
document.forms[i].action //對應<form action>屬性
document.forms[i].encoding //對應<form enctype>屬性
document.forms[i].target //對應<form target>屬性
document.forms[i].appendChild(oTag) //動態插入一個控制項
—————————-
範例程式碼(form)：
<html>
<!–Text控制項相關Script–>
<form name=”Myform”>
<input type=”text” name=”oText”>
<input type=”password” name=”oPswd”>
<form>
<script language=”javascript”>
//擷取文本密碼框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
—————————-
範例程式碼(checkbox)：
<html>
<!–checkbox,radio控制項相關script–>
<form name=”Myform”>
<input type=”checkbox” name=”chk” value=”1″>1
<input type=”checkbox” name=”chk” value=”2″>2
</form>
<script language=”javascript”>
function fun(){
//遍曆checkbox控制項的值並判斷是否選中
var length
length=document.forms[0].chk.length
for(i=0;i<length;i++){
v=document.forms[0].chk[i].value
b=document.forms[0].chk[i].checked
if(b)
alert(v=v+”被選中”)
else
alert(v=v+”未選中”)
}
}
</script>
<a href=# onclick=”fun()”>ddd</a>
</html>
—————————-
範例程式碼(Select)：
<html>
<!–Select控制項相關Script–>
<form name=”Myform”>
<select name=”oSelect”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>
</form>
<script language=”javascript”>
//遍曆select控制項的option項
var length
length=document.Myform.oSelect.length
for(i=0;i<length;i++)
document.write(document.Myform.oSelect[i].value)
</script>
<script language=”javascript”>
//遍曆option項並且判斷某個option是否被選中
for(i=0;i<document.Myform.oSelect.length;i++){
if(document.Myform.oSelect[i].selected!=true)
document.write(document.Myform.oSelect[i].value)
else
document.write(”<font color=red>”+document.Myform.oSelect[i].value+”</font>”)
}
</script>
<script language=”javascript”>
//根據SelectedIndex列印出選中的option
//(0到document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
document.write(document.Myform.oSelect[i].value)
</script>
<script language=”javascript”>
//動態增加select控制項的option項
var oOption = document.createElement(”OPTION”);
oOption.text=”4″;
oOption.value=”4″;
document.Myform.oSelect.add(oOption);
</script>
<html>
========================================================================
Div集合(頁面中的層):
<Div id=”oDiv”>Text</Div>
document.all.oDiv //引用圖層oDiv
document.all.oDiv.style.display=”" //圖層設定為可視
document.all.oDiv.style.display=”none” //圖層設定為隱藏
document.getElementId(”oDiv”) //通過getElementId引用對象
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有對象的集合
只有ie支援此屬性，因此也用來判斷瀏覽器的種類*/
—————————-
圖層對象的4個屬性
document.getElementById(”ID”).innerText //動態輸出文本
document.getElementById(”ID”).innerHTML //動態輸出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML
—————————-
範例程式碼：
<html>
<script language=”javascript”>
function change(){
document.all.oDiv.style.display=”none”
}
</script>
<Div id=”oDiv” onclick=”change()”>Text</Div>
</html>
<html>
<script language=”javascript”>
function changeText(){
document.getElementById(”oDiv”).innerText=”NewText”
}
</script>
<Div id=”oDiv” onmouseover=”changeText()”>Text</Div>
</html>
javascript中常用的event對象
Javascript的Event對象用來描述Javascript的事件，它主要作用於IE4和NN4以後的各個瀏覽器版本中。
Event代表事件狀態，如事件發生的元素，鍵盤狀態，滑鼠位置和滑鼠按鍵狀態。一旦事件發生,便會產生Event對象，如單擊一個按鈕，瀏覽器的記憶體中就產生相應的 event對象。
IE對事件的引用
在IE4以上版本中，event對象作為window屬性訪問：window.envent。其中引用的window部分是可選的．因此指令碼就像全域引用一樣來對待event對象：
event．propertyName
evnet對象成員表：
下面的表格列出了 event 對象引出的成員。請單擊左側的標籤來選擇你想要查看的成員類型。
對象
dataTransfer 提供了對於預定義的剪貼簿格式的訪問，以便在拖曳操作中使用。
集合
bookmarks 返回捆綁到當前事件所影響的行上的 ActiveX 資料對象(ADO)書籤的集合。
boundElements 返回頁面上所有綁定到給定資料集的所有元素的集合。
屬性
Abstract 使用 event 對象擷取進階流重新導向器(ASX)檔案中項目橫幅的 Abstract 內容。
altKey 設定或擷取 ALT 鍵的狀態。
altLeft 設定或擷取左 ALT 鍵的狀態。
Banner 使用 event 對象擷取進階流重新導向器(ASX)檔案中項目的 Banner 內容。
button 設定或擷取使用者所按的滑鼠按鍵。
cancelBubble 設定或擷取當前事件是否要在事件控制代碼中向上冒泡。
clientX 設定或擷取滑鼠指標位置相對於視窗用戶端區域的 x 座標，其中用戶端區域不包括視窗自身的控制項和捲軸。
clientY 設定或擷取滑鼠指標位置相對於視窗用戶端區域的 y 座標，其中用戶端區域不包括視窗自身的控制項和捲軸。
contentOverflow 擷取表明文檔處理當前 LayoutRect 對象後是否包含附加的內容。
ctrlKey 設定或擷取 Ctrl 鍵的狀態。
ctrlLeft 設定或擷取左 Ctrl 鍵的狀態。
dataFld 設定或擷取 oncellchange 事件影響的資料列。
fromElement 設定或擷取事件發生時啟用或滑鼠將要離開的對象。
keyCode 設定或擷取與導致事件的按鍵關聯的 Unicode 按鍵代碼。
MoreInfo 通過 event 對象擷取進階流重新導向器(ASX)檔案中項目橫幅的 MoreInfo 內容。
nextPage 擷取列印模板中下頁的位置。
offsetX 設定或擷取滑鼠指標位置相對於觸發事件的對象的 x 座標。
offsetY 設定或擷取滑鼠指標位置相對於觸發事件的對象的 y 座標。
propertyName 設定或擷取對象上發生更改的屬性名稱。
qualifier 設定或擷取由資料來源對象提供的資料成員的名稱。
reason 設定或擷取資料來源對象的資料轉送結果。
recordset 從資料來源對象設定或擷取對預設資料集的引用。
repeat 擷取 onkeydown 事件是否正在重複。
returnValue 設定或擷取事件的傳回值。
saveType 當 oncontentsave 觸發時擷取剪貼簿類型。
screenX 設定或擷取擷取滑鼠指標位置相對於使用者螢幕的 x 座標。
screenY 設定或擷取滑鼠指標位置相對於使用者螢幕的 y 座標。
shiftKey 設定或擷取 Shift 鍵的狀態。
shiftLeft 設定或擷取左 Shift 鍵的狀態。
srcElement 設定或擷取觸發事件的對象。
srcFilter 設定或擷取觸發 onfilterchange 事件的濾鏡對象。
srcUrn 擷取觸發事件的行為的統一資源名稱(URN)。
toElement 設定或擷取使用者要將滑鼠指標移動指向的對象的引用。
type 從 event 對象中擷取事件名稱。
wheelDelta 設定或擷取滾輪按鈕滾動的距離和方向。
x 設定或擷取滑鼠指標位置相對於父文檔的 x 像素座標。
y 設定或擷取滑鼠指標位置相對於父文檔的 y 像素座標。
注釋
event 對象僅在事件中可用──這意味著，你可以在事件控制代碼中使用該對象，但不能在其它代碼中使用。
儘管所有事件屬性都可通過所有的 event 對象訪問，但是在某些事件中某些屬性可能無意義。例如，fromElement 和 toElement 屬性僅當處理 onmouseover 和 onmouseout 事件時有意義。
在 Microsoft Visual Basic 指令碼版本(VBScript)中，你必須通過 window 對象訪問 event 對象。
此對象在 Microsoft Internet Explorer 4.0 的指令碼中可用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
