魔鬼字典 JavaScript 筆記代碼比較多亂第3/3頁(yè)

更新時(shí)間：2010年03月09日 21:03:36 作者：

魔鬼字典 JavaScript 筆記代碼比較多亂，對(duì)于有經(jīng)驗(yàn)的看容易點(diǎn)。

例子（ListboxSelectedIndex）

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript"> 
function showSelectedIndex() 
{ 
var oListbox=document.getElementById("selListbox"); 
alert(oListbox.selectedIndex); //oListbox.selectedIndex 顯示的是listbox（listbox中的選項(xiàng)成一個(gè)數(shù)組）選中的那一項(xiàng)在數(shù)組中的索引號(hào)（沒選中則顯示-1） 
} 
</script> 
</head> 
<body> 
<form action="#" method="post"> 
<select id="selListbox" size="2"> <!--<select>中的size屬性指示的是用戶能看見的選項(xiàng)數(shù)目--> 
<option>Original Value0</option> 
<option>Original Value1</option> 
<option>Original Value2</option> 
<option>Original Value3</option> 
<option>Original Value4</option> 
</select><br /> 
Select an option in the listbox and click "Show Selected Index".<br /> 
<input type="button" value="Show Selected Index" onclick="showSelectedIndex()" /> 
</form> 
</body> 
</html> 

例子添加options

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> //外置JS腳本下面有 
<script language="javascript" type="text/javascript"> 
function addItem() 
{ 
var oListbox=document.getElementById("selListbox"); 
var oTxtName=document.getElementById("txtName"); 
var oTxtValue=document.getElementById("txtValue"); 
ListUtil.add(oListbox,oTxtName.value,oTxtValue.value); 
} 
</script> 
</head> 
<body> 
<form action="#"> 
<select id="selListbox" size="1"> 
<option>Original Value</option> 
</select><br /> 
Click the Add button to add item with the following information:<br /> 
Name:<input type="text" id="txtName" /><br /> 
Value:<input type="text" id="txtValue" /><br /> 
<input type="button" value="Add" onclick="addItem()" /> 
</form> 
</body> 
</html> 

例子（一鍵式為所有超級(jí)鏈接添加onclick事件，跨窗體傳遞超鏈接內(nèi)容）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript"> 
function confirmclick() 
{ 
return confirm("Do you really want to visit"+location.href+"?"); 
} 
function confirmAllLinks() 
{ 
for(var i=0;i<document.links.length;i++) //document.links 為此項(xiàng)目的所有超級(jí)鏈接 
{ 
document.links[i].onclick=confirmclick; //為所有的超級(jí)鏈接添加onclick事件 
} 
} 
// window.onload=confirmAllLinks; //在窗體加載時(shí)就直接執(zhí)行該函數(shù) 
function listlinks(d) 
{ 
var newwin=window.open("","linklist","menubar,scrollbars,resizable,width=600,height=300"); 
for(var i=0;i<d.links.length;i++) 
{ 
newwin.document.write('<a href="'+d.links[i].href+'">'); //注意<a 中的格式‘' 
newwin.document.write(d.links[i].href); 
newwin.document.writeln("</a><br />"); 
} 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="alert(typeof this.onclick)" value="click me" /> 
<input type="button" value="Click Here" onclick="if(window.numclicks)numclicks++;else numclicks=1;this.value='Click #'+numclicks;" /> 
<a href="../js07/test1.htm">mattlee</a> 
<a href="../js07/test2.htm">marssion</a> 
<input type="button" value="link event" onclick="confirmAllLinks()" /> 
<input type="button" value="link event" onclick="listlinks(document)" /> 
</body> 
</html> 

例子（在文本框中只能輸入數(shù)字鍵）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script type="text/javascript" language="javascript" src="javascript/detect.js"></script> //驗(yàn)證瀏覽器的內(nèi)容，在jS第五章中有 
<script type="text/javascript" language="javascript" src="javascript/eventutil.js"></script> 
<script type="text/javascript" language="javascript" src="javascript/textutil.js"></script> 
</head> 
<body> 
<p>Try typing in the textbox. You can only type number characters.</p> 
<!--要在keypress事件處理函數(shù)中調(diào)用這個(gè)方法，當(dāng)字符被允許時(shí)返回true，不允許時(shí)返回false--> 
<form method="post" action="javascript:alert('submitted')"> 
<textarea rows="10" cols="25" validchars="0123456789d" onkeypress="return TextUtil.allowChars(this,event,false)"></textarea> 
<input type="submit" value="Submit Form" /> <!--↑--> 
</form> <!--this:返回<textarea>對(duì)象本身； event:系統(tǒng)自動(dòng)生成的事件直接打上去就行，boolean值：true：屏蔽ctrl+v false:可以用ctrl+v 
這種阻止復(fù)制粘貼的方法只適用于火狐，在IE中用“onpaste="return false"”加在<>中就可以了--> 
</body> 
</html> 
-------------------------------------------------------------------------------------------------------------------------------------------- 
src="javascript/textutil.js"中的內(nèi)容： 
var TextUtil=new Object(); 
TextUtil.isNotMax=function(oTextArea)//判斷文本框內(nèi)的內(nèi)容的長(zhǎng)度是否于文本框的最大長(zhǎng)度相等 
{ 
return oTextArea.value.length!=oTextArea.getAttribute("maxlength"); 
}; 
TextUtil.blockChars = function(oTextbox, oEvent, bBlockPaste)//阻止數(shù)字字符 
{ 
oEvent = EventUtil.formatEvent(oEvent); //格式化事件 
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //獲取元素的validchars屬性值，相當(dāng)于驗(yàn)證字符串 
var sChar = String.fromCharCode(oEvent.charCode); //獲取鍵盤錄入的數(shù)據(jù) 
var bIsValidChar = sInvalidChars.indexOf(sChar) == -1; //錄入的數(shù)據(jù)不包含在驗(yàn)證字符串中返回true 
if (bBlockPaste) { 
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v"); //不支持IE,IE通過onpaste事件控制 
} 
else { 
return bIsValidChar || oEvent.ctrlKey; 
} 
}; 
TextUtil.allowChars = function(oTextbox, oEvent, bBlockPaste)//允許數(shù)字字符 
{ 
oEvent = EventUtil.formatEvent(oEvent); //格式化事件 
var sValidChars = oTextbox.getAttribute("validchars"); //獲取元素的validchars屬性值，相當(dāng)于驗(yàn)證字符串 
var sChar = String.fromCharCode(oEvent.charCode); //獲取鍵盤錄入的數(shù)據(jù) 
var bIsValidChar = sValidChars.indexOf(sChar) > -1; //錄入的數(shù)據(jù)包含在驗(yàn)證字符串中返回true 
if (bBlockPaste) { 
return bIsValidChar && !(oEvent.ctrlKey && sChar == "v"); //阻止粘貼快捷鍵ctrl+v 
} 
else { 
return bIsValidChar || oEvent.ctrlKey; 
} 
}; 
TextUtil.blurBlock = function(oTextbox) { 
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //獲取元素的validchars屬性值，相當(dāng)于驗(yàn)證字符串 
var arrInvalidChars = sInvalidChars.split("");//將驗(yàn)證字符串分隔為字符數(shù)組 
for (var i = 0; i < arrInvalidChars.length; i++) { 
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {//如果文本框的值包含數(shù)組中的任意字符，則驗(yàn)證不通過 
alert("Character'" + arrInvalidChars[i] + "' not allowed."); 
oTextbox.focus(); 
oTextbox.select(); 
return; 
} 
} 
}; 
TextUtil.blurAllow=function(oTextbox) 
{ 
var sValidChars=oTextbox.getAttribute("validchars"); 
var arrTextChars=oTextbox.value.split(""); 
for(var i=0;i<arrTextChars.length;i++) 
{ 
if(sValidChars.indexOf(arrTextChars[i])==-1) 
{ 
alert("Character '"+arrTextChars[i]+"' not allowed."); 
} 
} 
}; 
TextUtil.numericScroll=function(oTextbox,oEvent) 
{ 
oEvent=EventUtil.formatEvent(oEvent); 
var iValue=oTextbox.value.length==0?0:parseInt(oTextbox.value);//獲取文本框中的值，如果沒填采用默認(rèn)值0 
var iMax=oTextbox.getAttribute("max");//獲取最大值 
var iMin=oTextbox.getAttribute("min");//獲取最小值 
if(oEvent.keyCode==38)//上箭頭 
{ 
if(iMax==null || iValue<iMax) 
{ 
oTextbox.value=(iValue+1); 
} 
} 
else if(oEvent.keyCode==40)//下箭頭 
{ 
if(iMin==null || iValue>iMin) 
{ 
oTextbox.value=(iValue-1); 
} 
} 
}; 
TextUtil.autosuggestMatch=function(sText,arrValues) 
{ 
var arrResult=new Array(); 
if(sText!="") 
{ 
for(var i=0;i<arrValues.length;i++) 
{ 
if(arrValues[i].indexOf(sText)==0)//在數(shù)組中查找是否包含傳入字符，如果匹配將該數(shù)組元素存入新數(shù)組 
{ 
arrResult.push(arrValues[i]); 
} 
} 
} 
return arrResult; 
}; 
TextUtil.autosuggest=function(oTextbox,arrValues,sListboxId) 
{ 
var oListbox=document.getElementById(sListboxId);//通過傳入ID 獲取指定列表框 
var arrMatches=TextUtil.autosuggestMatch(oTextbox.value,arrValues); 
ListUtil.clear(oListbox);//清空列表框 
for(var i=0;i<arrMatches.length;i++) 
{ 
ListUtil.add(oListbox,arrMatches[i]);//將匹配的值填入列表框 
} 
}; 
-------------------------------------------------------------------------------------------------------------------------- 
src="javascript/eventutil.js"中的內(nèi)容： 
var EventUtil=new Object; 
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){ 
if(oTarget.addEventListener) 
{ 
oTarget.addEventListener(sEventType,fnHandler,false); 
} 
else if(oTarget.attachEvent) 
{ 
oTarget.attachEvent("on"+sEventType,fnHandler); 
} 
else 
{ 
oTarget["on"+sEventType]=fnHandler; 
} 
}; 
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){ 
if(oTarget.removeEventHandler) 
{ 
oTarget.removeEventHandler(sEventType,fnHandler,false); 
} 
else if(oTarget.detachEvent) 
{ 
oTarget.detachEvent("on"+sEventType,fnHandler); 
} 
else 
{ 
oTarget["on"+sEventType]=null; 
} 
}; 
//通過格式化事件函數(shù)，盡量將IE標(biāo)準(zhǔn)向DOM標(biāo)準(zhǔn)靠攏 
EventUtil.formatEvent=function(oEvent){ 
if(isIE && isWin) 
{ 
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;//DOM有charCode IE有keyCode 使用這樣的方式使IE兼容DOM 
//eventPhase 屬性返回事件傳播的當(dāng)前階段。它的值是Event.CAPTURING_PHASE(1) Event.AT_TARGET(2) Event.BUBBLING_PHASE(3)三個(gè)常量之一，它們分別表示捕獲階段、正常事件派發(fā)和起泡階段。 
oEvent.eventPhase=2; 
oEvent.isChar=(oEvent.charCode>0); 
oEvent.pageX=oEvent.clientX+document.body.scrollLeft; 
oEvent.pageY=oEvent.clientY+document.body.scrollTop; 
oEvent.preventDefault=function(){//取消事件的默認(rèn)動(dòng)作。 
this.returnValue=false; 
}; 
if(oEvent.type=="mouseout") 
{ 
oEvent.relatedTarget=oEvent.toElement; 
} 
else if(oEvent.type=="mouseover") 
{ 
oEvent.relatedTarget=oEvent.fromElement; 
} 
oEvent.stopPropagation=function(){ 
this.cancelBubble=true; 
}; 
oEvent.target=oEvent.srcElement; 
oEvent.time=(new Date).getTime(); 
}; 
return oEvent; 
}; 
EventUtil.getEvent=function(){ 
if(window.event) 
{ 
return this.formatEvent(window.event); 
} 
else 
{ 
return EventUtil.getEvent.caller.arguments[0]; 
} 
}; 

例子（自動(dòng)查找，就像手機(jī)中的通訊錄）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script> //上面有 
<script language="javascript" type="text/javascript"> 
var arrColors=["red", "orange", "yellow", "green", "blue", "indigo", 
"violet", "brown", "black", "tan", "ivory", "navy", 
"aqua", "white", "purple", "pink", "gray", "silver"]; 
arrColors.sort(); //對(duì)上述數(shù)組進(jìn)行排序 
function setText(oListbox,sTextboxID) 
{ 
var oTextbox=document.getElementById(sTextboxID); 
if(oListbox.selectedIndex>-1) 
{ 
oTextbox.value=oListbox.options[oListbox.selectedIndex].text; //options:下拉列表框中的元素的集合，通過元素的索引號(hào)進(jìn)行訪問 
} 
} 
</script> 
</head> 
<body> 
<p>Type in a color in lowercase:</p> 
<input type="text" id="txtColor" onkeyup="TextUtil.autosuggest(this,arrColors,'lstColors')" /><br /><br /> 
<!-- ↑ 
this:將文本框自己傳過去；arrColors:將要從中查找的總數(shù)組傳過去；'lstColors'(注意加‘'傳入對(duì)象的id名時(shí)加‘' 
為的是不將傳入得東西當(dāng)成一個(gè)對(duì)象而是僅僅當(dāng)成一個(gè)字符串，為后面在函數(shù)中用此字符串當(dāng)id號(hào)找對(duì)象做準(zhǔn)備)將要查出的文本的現(xiàn)實(shí)地點(diǎn)傳過去--> 
<select id="lstColors" size="5" style="width:200px" onclick="setText(this,'txtColor')"></select> 
</body> 
</html> 
------------------------------------------------------------------------------------------------------------------------------------- 
src="javascript/listutil.js"中的內(nèi)容： 
var ListUtil=new Object(); 
ListUtil.getSelectedIndexes=function(oListbox) 
{ 
var arrIndexes=new Array(); 
for(var i=0;i<oListbox.options.length;i++) 
{ 
if(oListbox.options[i].selected)//獲取選中項(xiàng)的索引 
{ 
arrIndexes.push(i); 
} 
} 
return arrIndexes; 
}; 
ListUtil.add=function(oListbox,sName,sValue) 
{ 
var oOption=document.createElement("option"); 
oOption.appendChild(document.createTextNode(sName)); 
if(arguments.length==3)//如果傳入了第三個(gè)參數(shù)，則添加屬性 
{ 
oOption.setAttribute("value",sValue); 
} 
oListbox.appendChild(oOption); 
}; 
ListUtil.remove=function(oListbox,iIndex)//通過索引刪除項(xiàng) 
{ 
oListbox.remove(iIndex); //oListbox.remove硬打上去的 
}; 
ListUtil.clear=function(oListbox)//清空列表框 
{ 
for(var i=oListbox.options.length-1;i>=0;i--) { 
ListUtil.remove(oListbox,i); 
} 
}; 
ListUtil.move=function(oListboxFrom,oListboxTo,index) 
{ 
var oOption=oListboxFrom.options[index]; 
if(oOption!=null) 
{ 
oListboxTo.appendChild(oOption);//元素節(jié)點(diǎn)同時(shí)只能屬于一個(gè)父節(jié)點(diǎn)，所以實(shí)現(xiàn)了移動(dòng) 
} 
}; 
ListUtil.copy=function(oListboxFrom,oListboxTo,index) 
{ 
var oOption=oListboxFrom.options[index];//獲取原節(jié)點(diǎn)元素，并且創(chuàng)建新的元素幾點(diǎn)，從原節(jié)點(diǎn)取值 
var newOption=document.createElement("option"); 
var newTxtNode=document.createTextNode(oOption.firstChild.nodeValue); 
newOption.appendChild(newTxtNode); 
if(newOption!=null) 
{ 
oListboxTo.appendChild(newOption); 
} 
} 
ListUtil.shiftUp=function(oListbox,index)//選項(xiàng)向上移動(dòng) 
{ 
if(index>0) 
{ 
var oOption=oListbox.options[index];//獲取當(dāng)前項(xiàng) 
var oPrevOption=oListbox.options[index-1];//獲取上一項(xiàng) 
oListbox.insertBefore(oOption,oPrevOption); 
} 
}; 
ListUtil.shiftDown=function(oListbox,index) 
{ 
if(index<oListbox.options.length-1) 
{ 
var oOption = oListbox.options[index]; //獲取當(dāng)前項(xiàng) 
var oNextOption=oListbox.options[index+1];//獲取下一項(xiàng) 
oListbox.insertBefore(oNextOption,oOption); 
} 
}; 

例子（禁止輸入數(shù)字）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script> // 腳本上面都有Copy下來看 
<script language="javascript" type="text/javascript" src="javascript/eventutil.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script> 
</head> 
<body> 
<p>Try typing in the textbox.You can only type non-number characters.</p> 
<form method="post" action="javascript:alert('submitted')"> 
<textarea rows="10" cols="25" invalidchars="0123456789" onkeypress="return TextUtil.blockChars(this,event,true)"></textarea> 
<input type="submit" value="Submit Form" /> 
</form> 
</body> 
</html> 

例子（一個(gè)復(fù)雜的例子，關(guān)于可以將已經(jīng)選定的文本框和單選按鈕的值總結(jié)并顯示出來）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript"> 
var radCPUSpeedIndex=0; 
function radCPUSpeed_onclick(radIndex) 
{ 
var returnValue=true; 
if(radIndex==1) 
{ 
returnValue=false; 
alert("Sorry that processor speed is currently unavailible"); 
document.forms[0].radCPUSpeed[radCPUSpeedIndex].checked=true; 
} 
else 
{ 
radCPUSpeedIndex=radIndex; 
} 
return returnValue; 
} 
function butCheck_onclick() 
{ 
var controlIndex; 
var element;//debugger 
var numberOfControls=document.forms[0].length; //document.forms[0]表示的是第一張表單中命了名的元素的集合 
var compSpec="Your chosen processor speed is "; 
compSpec=compSpec+document.forms[0].radCPUSpeed[radCPUSpeedIndex].value; //forms[0].radCPUSpeed[radCPUSpeedIndex] 在上一個(gè)函數(shù)（在選擇單選按鈕時(shí)已經(jīng)觸發(fā)）已經(jīng)將選定的數(shù)組索引賦值了 
compSpec=compSpec+"\nWith the following additional components\n"; 
for(controlIndex=0;controlIndex<numberOfControls;controlIndex++) 
{ 
element=document.forms[0][controlIndex]; 
if(element.type=="checkbox") 
{ 
if(element.checked==true) 
{ 
compSpec=compSpec+element.value+"\n"; 
} 
} 
} 
alert(compSpec); 
} 
</script> 
</head> 
<body> 
<form action="javascript:alert('Submit')" method="post"> 
<p>Tick all of the components you want included on your coumputer</p> 
<table border="1"> 
<tr> 
<td>DVD-RW</td> 
<td><input type="checkbox" name="chkDVD" value="DVD-RW" /></td> 
</tr> 
<tr> 
<td>CD-ROM</td> 
<td><input type="checkbox" name="chkCD" value="CD-ROM" /></td> 
</tr> 
<tr> 
<td>Zip Drive</td> 
<td><input type="checkbox" name="chkZip" value="ZIP Drive" /></td> 
</tr> 
</table> 
<p>Select the processor speed you require</p> 
<table border="1"> 
<tr> 
<td><input type="radio" name="radCPUSpeed" checked="checked" onclick="return radCPUSpeed_onclick(0)" value="3.8 Ghz" /></td> 
<td>3.8 Ghz MHz</td> 
<td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(1)" value="4.8 Ghz" /></td> 
<td>4.8 Ghz MHz</td> 
<td><input type="radio" name="radCPUSpeed" onclick="return radCPUSpeed_onclick(2)" value="6 Ghz" /></td> 
<td>6 Ghz MHz</td> 
</tr> 
</table> 
<input type="button" value="Check Form" name="butCheck" onclick="return butCheck_onclick()" /> 
</form> 
</body> 
</html> 

例子（不同父節(jié)點(diǎn)之間的子節(jié)點(diǎn)的移動(dòng)和刪除）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/listutil.js"></script> //腳本上面有 
<script language="javascript" type="text/javascript"> 
function moveItem() 
{ 
var oListbox1=document.getElementById("selListbox1"); 
var oListbox2=document.getElementById("selListbox2"); 
var oTxtIndex=document.getElementById("txtIndex"); 
ListUtil.move(oListbox1,oListbox2,parseInt(oTxtIndex.value)); // 
} 
function copyItem() 
{ 
var oListbox1=document.getElementById("selListbox1"); 
var oListbox2=document.getElementById("selListbox2"); 
var oTxtIndex=document.getElementById("txtIndex"); 
ListUtil.copy(oListbox1,oListbox2,parseInt(oTxtIndex.value)); 
} 
</script> 
</head> 
<body> 
<form action="#" method="post"> 
<select id="selListbox1" size="5"> 
<option>Original Value 1-0</option> 
<option>Original Value 1-1</option> 
<option>Original Value 1-2</option> 
<option>Original Value 1-3</option> 
<option>Original Value 1-4</option> 
</select> 
<select id="selListbox2" size="5"> 
<option>Original Value 2-0</option> 
<option>Original Value 2-1</option> 
<option>Original Value 2-2</option> 
<option>Original Value 2-3</option> 
<option>Original Value 2-4</option> 
</select> 
<p>Clice the Move button to move the item with this position:</p> 
<input type="text" id="txtIndex" /><br /> 
<input type="button" value="Move" onclick="moveItem()" /> 
<input type="button" value="Copy" onclick="copyItem()" /> 
</form> 
</body> 
</html> 

例子（限制多行文本框的輸入最大值）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script> 
</head> 
<body> 
<p>Try typing in the textbox. You can only type 25 characters.</p> 
<form method="post" action="javascript:alert('Submitted')"> 
<textarea rows="10" cols="20" maxlength="25" onkeypress="return TextUtil.isNotMax(this)"></textarea> 
<input type="submit" value="Submit Form" /> 
</form> 
</body> 
</html> 
-------------------------------------------------------------------------- 
外置腳本中的調(diào)用的方法： 
TextUtil.isNotMax=function(oTextArea)//判斷文本框內(nèi)的內(nèi)容的長(zhǎng)度是否于文本框的最大長(zhǎng)度相等 
{ 
return oTextArea.value.length!=oTextArea.getAttribute("maxlength"); 
}; 

例子（三個(gè)文本框，輸入達(dá)到第一個(gè)文本框的最大值，光標(biāo)自動(dòng)移到下一個(gè)文本框...）

復(fù)制代碼代碼如下:

 
html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script type="text/javascript" language="javascript" src="javascript/formutil.js"></script> 
</head> 
<body> 
<p>Enter your phone number below (ZH style ##-####-######):</p> 
<form method="post" action="javascript:alert('submit')"> 
<input type="text" size="2" maxlength="2" value="" onkeyup="FormUtil.tabForward(this)" /> 
<input type="text" size="4" maxlength="4" value="" onkeyup="FormUtil.tabForward(this)" /> 
<input type="text" size="7" maxlength="7" value="" onkeyup="FormUtil.tabForward(this)" /> 
<input type="submit" value="Submit Form" /> 
</form> 
</body> 
</html> 
------------------------------------------------------------------------------------- 
src="javascript/formutil.js"中的文本： 
var FormUtil=new Object; 
FormUtil.focusOnFirst = function() { 
if (document.forms.length > 0) {//通過form的length屬性判斷表單中是否有其他元素 
for (var i = 0; i < document.forms[0].elements.length; i++) { 
var oField = document.forms[0].elements[i]; 
if (oField.type != "hidden") { 
if (oField.value == "") {//在頁(yè)面載入很慢的情況下，該腳本可能還沒有運(yùn)行，用戶就已經(jīng)輸入了數(shù)據(jù)，當(dāng)執(zhí)行到該腳本的時(shí)候，會(huì)給用戶帶來不便。 
oField.focus(); 
return; 
} 
} 
} 
} 
}; 
FormUtil.setTextboxes=function() 
{ 
var colInputs=document.getElementByTagName("input"); 
var colTextAreas=document.getElementsByTagName("textarea"); 
for(var i=0;i<colInputs.length;i++) 
{ 
if(colInputs[i].type=="text" || colInputs[i].type=="password") 
{ 
colInputsp[i].onfocus=function(){this.select();}; 
} 
} 
for(var i=0;i<colTextAreas.length;i++) 
{ 
colTextAreas[i].onfocus=function(){this.select();}; 
} 
}; 
FormUtil.tabForward = function(oTextbox) { 
var oForm = oTextbox.form; 
//條件為最后一個(gè)元素不是文本框并且文本框值的長(zhǎng)度和文本框最大長(zhǎng)度相等時(shí) 
if (oForm.elements[oForm.elements.length - 1] != oTextbox && oTextbox.value.length == oTextbox.maxLength) { //oForm.elements[oForm.elements.length - 1] != oTextbox判斷當(dāng)前傳進(jìn)來的文本框不是最后一個(gè)文本框 
for (var i = 0; i < oForm.elements.length; i++) { //oTextbox.value.length == oTextbox.maxLength 判斷當(dāng)前輸入的文本有沒有達(dá)到它的最大值 
if (oForm.elements[i] == oTextbox) { 
if (oForm.elements[i + 1].type != "hidden") { 
oForm.elements[i + 1].focus(); 
return; 
} 
return; 
} 
} 
} 
}; 

例子（當(dāng)焦點(diǎn)離開時(shí)驗(yàn)證文本框中的內(nèi)容）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/detect.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/eventutil.js"></script> 
<script language="javascript" type="text/javascript" src="javascript/textutil.js"></script> 
</head> 
<body> 
<p>Type a number into the textbox,then press the up or down arrow.</p> 
<form method="post" action="javascript:alert('submit')"> 
<input type="text" onkeypress="return TextUtil.allowChars(this,event)" max="20" min="-10" validchars="0123456789" onblur="TextUtil.blurAllow(this)" 
onkeydown="TextUtil.numericScroll(this,event)" /> 
<input type="button" value="Submit Form" /> 
</form> 
</body> 
</html> 
-------------------------------- 
js： 
TextUtil.blurBlock = function(oTextbox) { 
var sInvalidChars = oTextbox.getAttribute("invalidchars"); //獲取元素的validchars屬性值，相當(dāng)于驗(yàn)證字符串 
var arrInvalidChars = sInvalidChars.split("");//將驗(yàn)證字符串分隔為字符數(shù)組 
for (var i = 0; i < arrInvalidChars.length; i++) { 
if (oTextbox.value.indexOf(arrInvalidChars[i]) > -1) {//如果文本框的值包含數(shù)組中的任意字符，則驗(yàn)證不通過 
alert("Character'" + arrInvalidChars[i] + "' not allowed."); 
return; //跳出 
} 
} 
}; 

JS 第七章：COOKIE操作與樣式表編程↑↓←→
//Cookie簡(jiǎn)介
{
cookie是網(wǎng)站放在用戶計(jì)算機(jī)上的一小塊信息，分為： //例如：手機(jī)QQ上的登錄，點(diǎn)擊記住用戶名密碼，下次就不同輸入了，這就是Cookie做的

復(fù)制代碼代碼如下:

 
1、存入計(jì)算機(jī)內(nèi)存（臨時(shí)cookie） 
2、寫入文件（持久cookies） 

路徑：C:\Documents and Settings\Administrator\Cookies
}
//Cookie的組成：

復(fù)制代碼代碼如下:

 
1.名稱：每一個(gè)cookie由一個(gè)唯一的名稱代表，不區(qū)分大小寫 
2、值： 保存在Cookie中的字符串值，長(zhǎng)度小于4KB 
3、域： 出于安全考慮，網(wǎng)站不能訪問由其他域創(chuàng)建的cookie 
4、路徑 ：限制了對(duì)web服務(wù)器上的特定目錄的訪問 
5、失效日期 ：cookie何時(shí)應(yīng)該被刪除 
6、安全標(biāo)志： 一個(gè)bool值，用于表示cookie是否只能從安全網(wǎng)站（使用SSL和Https協(xié)議）中訪問 

//安全限制

復(fù)制代碼代碼如下:

 
1、每個(gè)域（每一個(gè)網(wǎng)站）最多只能在一臺(tái)用戶機(jī)器上存儲(chǔ)20個(gè)cookie 
2、每個(gè)cookie的尺寸不能超過4096字節(jié) 
3、一臺(tái)用戶機(jī)器上的cookie總數(shù)不能超過300個(gè) 
4、瀏覽器自身的安全機(jī)制: 阻止所有cookie、阻止未知網(wǎng)站的cookie或者創(chuàng)建cookie時(shí)給用戶提示 （調(diào)試方法：工具→Internet選項(xiàng)→隱私→設(shè)置安全性級(jí)別） 

//寫入cookie

復(fù)制代碼代碼如下:

 
cookie實(shí)際上是一個(gè)字符串，當(dāng)頁(yè)面載入時(shí)由瀏覽器自動(dòng)生成。 
通過document對(duì)象的cookie屬性可以操作。 
在cookie中，信息由分號(hào)隔開，通常每個(gè)cookie都包含了一對(duì)由等號(hào)分開的名字和值。 
fur=blue; food=biscuits; name=Cookie_Monster 

//cookie的寫入有點(diǎn)類似于鍵值對(duì)的形式
例子（cookieWrite）(設(shè)置cookie的過期時(shí)間（過期時(shí)間被添加到cookie的末尾）)

復(fù)制代碼代碼如下:

 
src="javascript/cookieWrite.js"中的內(nèi)容： 
var myCookie=new Object(); 
myCookie.writeCookie = function(isLogin, isExpire)//isLogin表示登錄成功 isExpire表示是臨時(shí)還是持久cookie 
{ 
var theCookie; 
if (isLogin == true && isExpire == true) { //寫入永久cookie 注意：當(dāng)創(chuàng)建自己的cookie字符串時(shí)，一定要確保名字和值不包括空格、逗號(hào)或者分號(hào)。這些字符會(huì)在解析cookie字符串的時(shí)候造成錯(cuò)誤 
var date = new Date(Date.parse("May 1, 2010")); //Date.parse("日期") 是將一個(gè)日期轉(zhuǎn)換為字符串 
theCookie = "isLogin=marssion" + ";Expires=" + date.toGMTString(); //date.toGMTString()方法點(diǎn)不出來 ，是將時(shí)間進(jìn)一步進(jìn)行轉(zhuǎn)換成（GMT（格林威治時(shí)間表示法））類型的字符串格式 
document.cookie = theCookie; //Expires=拼成的一個(gè)字符串：表示的是過期時(shí)間，和前面的字符串用“；“隔開，理論上一個(gè)cookie只有一個(gè)等號(hào)（用戶只能每次添加一個(gè)cookie，即使嚴(yán)格按照cookie串的格式將多個(gè)cookie拼接成一個(gè)大串，也無法將這個(gè)字符串加入到document.cookie中），加入過期時(shí)間是一個(gè)例外 
location.href = "cookieRead.htm"; //點(diǎn)擊后跳轉(zhuǎn)到相應(yīng)的頁(yè)面 
} 
else if (isLogin == true && isExpire == false) { //寫入臨時(shí)cookie 
theCookie = "isLogin=marssion"; 
document.cookie = theCookie; 
location.href = "cookieRead.htm"; 
} 
} 
---------------------------------------------------------------- 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/cookieWrite.js"></script> 
<script language="javascript" type="text/javascript"> 
function CheckLogin() 
{ 
var myvalue=document.getElementById("userName"); 
var pwd=document.getElementById("password"); 
if(myvalue.value=="marssion" && pwd.value=="1234") { 
WriteCookie(true);//true表示用戶名密碼正確，登錄成功 
return true; 
} 
else 
{ 
alert("UserName or Password error!"); 
return false; 
} 
} 
function WriteCookie(islogin) 
{ 
var myCheckBox=document.getElementById("remember"); 
if(myCheckBox.checked==true) 
{ 
myCookie.writeCookie(islogin,true);//寫入持久cookie 
} 
else 
{ 
myCookie.writeCookie(islogin,false);//寫入臨時(shí)cookie 
} 
} 
</script> 
</head> 
<body> 
<h1>Writing Cookies</h1> 
<h2>Look for the cookie in your cookie folder</h2> 
<h3>Location:"C:\Documents and Settings\[UserName]\Cookies"</h3> 
<form> 
UserName:<br /><input type="text" id="userName" /><br /> 
Password:<br /><input type="password" id="password" /><br /><br /> 
<input type="button" value="Submit" onclick="if(CheckLogin()==false) return false" /> 
<input type="reset" value="Reset" /><br /> 
Remember Me<input id="remember" type="checkbox" checked="checked" value="NoExpire" /> 
</form> 
</body> 
</html> 

例子（cookieRead）

復(fù)制代碼代碼如下:

 
src="javascript/cookieRead.js"中的內(nèi)容： 
var myCookie=new Object(); 
myCookie.getCookie = function(searchName) 
{ 
var cookies=document.cookie.split(";");//cookie里的字符串是用“；”分隔開的 
for(var i=0;i<cookies.length;i++) 
{ 
var cookiecrumbs=cookies[i].split("="); //在把取出的字符串用“=”分隔開 
var cookiename=cookiecrumbs[0]; 
var cookievalue=cookiecrumbs[1]; 
if(cookiename==searchName) 
{ 
return cookievalue; //將找到得相應(yīng)的name的值返回去，每個(gè)cookie都有一個(gè)相應(yīng)的txt文檔，我們只需要將相應(yīng)的cookie名字給出，在存放cookie的txt文件夾里有一個(gè)dat數(shù)據(jù)庫(kù)文件，它會(huì)自動(dòng)找到相應(yīng)的txt文檔 
} 
} 
return false; 
} 
----------------------------------------------------------------------- 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script language="javascript" type="text/javascript" src="javascript/cookieRead.js"></script> 
<script language="javascript" type="text/javascript"> 
function load() 
{ 
var isLogin=myCookie.getCookie("isLogin"); 
if (isLogin == "marssion") 
{ 
document.write("登陸成功。歡迎你！"); 
} 
else 
{ 
location.href="cookieWrite.htm"; 
} 
} 
</script> 
</head> 
<body onload="load()"> 
</body> 
</html> 

例子（頁(yè)面上的超級(jí)鏈接鼠標(biāo)移上去的時(shí)候下劃線變?yōu)樯蟿澗€）

復(fù)制代碼代碼如下:

 
addLoadListener(init); 
function init() 
{ 
if(typeof document.styleSheets!="undefined") //document.styleSheets :當(dāng)前引用的所有樣式 
{ 
addStyleRule(document.styleSheets[0],"a:hover","text-decoration:overline"); //需要引用<link rel="Stylesheet" type="text/css" href="aa1.css" /> 
} 
return true; 
} 
function addStyleRule(styleSheet,selector,properties,index) 
{ 
if(typeof styleSheet.addRule!="undefined") 
{ 
styleSheet.addRule(selector,properties,index); 
} 
else if(typeof styleSheet.insertRule!="undefined") 
{ 
if(typeof index=="undefined") 
{ 
index=styleSheet.cssRules.length; 
} 
styleSheet.insertRule(selector+"{"+properties+"}",index); 
} 
return true; 
} 
function addLoadListener(fn) 
{ 
if (typeof window.addEventListener != 'undefined') 
{ 
window.addEventListener('load', fn, false); 
} 
else if (typeof document.addEventListener != 'undefined') 
{ 
document.addEventListener('load', fn, false); 
} 
else if (typeof window.attachEvent != 'undefined') 
{ 
window.attachEvent('onload', fn); 
} 
else 
{ 
var oldfn = window.onload; 
if (typeof window.onload != 'function') 
{ 
window.onload = fn; 
} 
else 
{ 
window.onload = function() 
{ 
oldfn(); 
fn(); 
}; 
} 
} 
} 

//讀取Cookie中Value的某個(gè)值

復(fù)制代碼代碼如下:

 
下面為外置JS文件中的內(nèi)容： 
--- 
var cookieName = "monsterCookie"; 
var cookieValue = "fur:blue/food:biscuits/name:monsterCookie"; 
debugger; 
cookieValue=escape(cookieValue);//對(duì)cookie值進(jìn)行編碼 
var theCookie = cookieName + "=" + cookieValue; 
document.cookie=theCookie; 
var monsterName = getSubCookie("monsterCookie", "name"); 
alert("The value of the sub-cookie 'name' is :"+monsterName); 
function getSubCookie(cookieName,subCookieName) { 
var cookies=document.cookie.split(";"); //先用分號(hào)進(jìn)行拆分 
for(var i=0;i<cookies.length;i++) 
{ 
var cookieCrumbs=cookies[i].split("="); //再用等號(hào)進(jìn)行拆分 
if(cookieCrumbs[0]==cookieName) //如果cookieCrumbs[0](拆分出的名字)等于傳入的名字 
{ 
var cookieValue=cookieCrumbs[1]; //獲得所需要的值 
cookieValue = unescape(cookieValue); //對(duì)cookie值進(jìn)行解碼 
var subCookies=cookieValue.split("/"); 
for(var j=0;j<subCookies.length;j++) 
{ 
var subCookieCrumbs=subCookies[j].split(":"); 
if(subCookieCrumbs[0]==subCookieName) 
{ 
return subCookieCrumbs[1]; 
} 
} 
} 
} 
return false; 
} 

-------------------------------------------------------------------------
//樣式：
//訪問樣式

復(fù)制代碼代碼如下:

 
使用style對(duì)象需要注意幾個(gè)問題。 
樣式設(shè)置必須符合CSS規(guī)范。 
如果樣式屬性名稱中帶“-”號(hào)，首字母大些。 
保留字，不能用作屬性名稱。 
使用style對(duì)象獲取的屬性與元素最終顯示效果并不一定相同，因?yàn)槌藘?nèi)聯(lián)樣式聲明之外，還可以通過<style>元素以及鏈接樣式表的方式改變?cè)氐娘@示效果 

例子（關(guān)于style屬性值的拼寫，和在IE火狐中的區(qū)別）

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Style Example</title> 
<script type="text/javascript"> 
function sayStyle() { 
var oDiv = document.getElementById("div1"); 
//alert(oDiv.style.cssFloat); //火狐 ：css+... 
alert(oDiv.style.styleFloat); //IE：style+... 
//alert(oDiv.style.backgroundColor);//將‘-'去掉，將后一個(gè)單詞首字母大寫 
} 
</script> 
</head> 
<body> 
<div id="div1" style="background-color: red; height: 50px; width: 
50px;float:left"></div><br /> 
<input type="button" value="Get Background Color" onclick="sayStyle()" /> 
</body> 
</html> 

例子（變換層的顏色）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>無標(biāo)題頁(yè)</title> 
<script type="text/javascript" language="javascript"> 
function aa() 
{ 
var cr=document.getElementById("div1"); 
cr.style.backgroundColor='orange'; 
} 
function bb() 
{ 
var cr=document.getElementById("div1"); 
cr.style.backgroundColor="blue"; 
} 
function cc() 
{ 
var cr=document.getElementById("div1"); 
var cc=cr.style.backgroundColor.toString(); //必須去對(duì)象，用this報(bào)錯(cuò) 
alert(cc); 
} 
</script> 
</head> 
<body> 
<div id="div1" style=" background-color:Red; height:50px; width:50px;" onmouseover="aa()" onmouseout="bb()"></div> 
<input type="button" value="Get Background Color" onclick="cc()" /> 
</body> 
</html> 
----------------------------------------------------- 
或者上面等價(jià)于： 
<html> 
<head> 
<title>Style Example</title> 
<script type="text/javascript"> 
function sayStyle() { 
var oDiv = document.getElementById("div1"); 
alert(oDiv.style.backgroundColor); 
} 
</script> 
</head> 
<body> 
<div id="div1" 
style="background-color: red; height: 50px; width: 50px" 
onmouseover="this.style.backgroundColor= 'blue'" 
onmouseout="this.style.backgroundColor = 'green'"></div> 
<input type="button" value="Get Background Color" onclick="sayStyle()" /> 
</body> 
</html> 

例子（將樣式文本輸出）

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Style Example</title> 
</head> 
<body> 
<div id="div1" 
style="background-color: red; height: 50px; width: 50px" 
onclick="alert(this.style.cssText)"></div> //this.style.cssText : background-color: red; height: 50px; width: 50px 
</body> 
</html> 

//通過Style對(duì)象讀取單個(gè)樣式的方法

復(fù)制代碼代碼如下:

 
getPropertyPriority() 如果css屬性“important”定義在規(guī)則中則返回important，否則將返回空字符串 
Item(index) 按照序號(hào)來返回css屬性中的名字 
removeProperty(propertyName) 從css定義中刪除屬性 
setProperty(propertyName,value,priority) 給css設(shè)置屬性 

例子（屬性的設(shè)置和移除（火狐能用））

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Style Example</title> 
<script type="text/javascript"> 
function useMethods() { 
var oDiv = document.getElementById("div1"); 
// IE不支持以下屬性和方法 
alert(oDiv.style.item(0)); //outputs “background-color" 
alert(oDiv.style.getPropertyValue("background-color")); //得到當(dāng)前的background-color值 
alert(oDiv.style.removeProperty("background-color")); //將background-color屬性移除 
} 
</script> 
</head> 
<body> 
<div id="div1" style="background-color: red; height: 50px; width:50px" 
onmousemove="this.style.setProperty('background-color','blue','')" <!--setProperty("樣式名（css格式）","樣式值","給空就行了")--> 
onmouseout="this.style.setProperty('background-color','red','')"></div><br /> 
<input type="button" value="Use Methods" onclick="useMethods()" /> 
</body> 
</html> 

例子（動(dòng)態(tài)改變字體的大小，用三元運(yùn)算符使IE和火狐兼容）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Test</title> 
<!--<link rel="Stylesheet" type="text/css" href="css/a.css" />--> 
<style type="text/css"> 
* { //*{} 應(yīng)用所有 
font-family: Tahoma, Arial, serif; //.div{} （class選擇器 應(yīng)用所有的層） 
font-size: 18pt; //#id名{} (ID選擇器) 
text-align: left; 
} 
.div { 
font-size: 30px; 
color: #FF4500; 
} 
</style> <!-- *{} 這是一個(gè)樣式規(guī)則--> <!-- .div{} 這是一個(gè)樣式規(guī)則--> 
<script language="javascript" type="text/javascript"> 
var tag=false; 
function change() { 
// CSS樣式規(guī)則的集合 
// 樣式規(guī)則 
// ↓ 
var cssRules = document.styleSheets[0].rules ? document.styleSheets[0].rules : document.styleSheets[0].cssRules; //此處三元運(yùn)算符的作用是：讓IE和火狐都能用 // 修改.div樣式規(guī)則中的font-size樣式 
// ↑ ↑ 
// 當(dāng)前引用的所有樣式 三元運(yùn)算符如果？前的結(jié)果返回的是true就執(zhí)行：前的返回的是false就執(zhí)行：后的 
if(tag==false) 
{ 
cssRules[1].style.fontSize = "60px"; 
tag=true; 
} 
else{ 
cssRules[1].style.fontSize = "30px"; 
tag=false; 
} 
} 
</script> 
</head> 
<body> 
<div id="div1" class="div">msg</div> 
<div id="div2" class="div">msg</div> 
<div id="div3" class="div">msg</div> 
<button onclick="change()">change</button> 
</body> 
</html> 

例子（切換樣式表1）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Test</title> 
<link id="style1" type="text/css" rel="stylesheet" href="css/style1.css"title="white" /> 
<link id="style2" type="text/css" rel="stylesheet" href="css/style2.css" title="gray" /> 
<script language="javascript" type="text/javascript"> 
getElement("style1").href = ""; 
getElement("style2").href = ""; 
function setStyle(title,sa) { 
// 首先禁用所有的樣式表 
getElement("style1").href = ""; 
getElement("style2").href = ""; 
// 啟用指定的樣式表 
getElement(title).href = sa; 
} 
function getElement(id) { 
return document.getElementById(id); 
} 
</script> 
</head> 
<body> 
<div> 
<p> 
We would like to see as much CSS1 as possible. 
</p> 
<p> 
If your design doesn't work in at least IE5+/Win and Mozilla (run 
by over 90% of the population), chances are we won't accept it. 
</p> 
</div> 
<button onclick="setStyle('style1','css/style1.css')">white</button> 
<button onclick="setStyle('style2','css/style2.css')">gray</button> 
</body> 
</html> 

例子（切換樣式表2）

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Test</title> 
<link type="text/css" rel="stylesheet" href="css/style1.css" title="白色風(fēng)格" id="style1" /> 
<link type="text/css" rel="stylesheet" href="css/style2.css" title="灰色風(fēng)格" id="style2" /> 
<script language="javascript" type="text/javascript"> 
function setStyle() { 
var option1 = document.getElementById("option1"); 
var option2 = document.getElementById("option2"); 
var style1 = document.getElementById(option1.value); 
var style2 = document.getElementById(option2.value); 
// 首先禁用所有的樣式表 
style1.disabled = true; 
style2.disabled = true; 
// 啟用指定的樣式表 
if (option1.selected) { 
style1.disabled = false; 
} 
else { 
style2.disabled = false; 
} 
} 
</script> 
</head> 
<body> 
<select id="styleSel" onchange="setStyle()"> 
<option value="style1" id="option1">白色風(fēng)格</option> 
<option value="style2" id="option2">灰色風(fēng)格</option> 
</select> 
<div> 
<p> 
We would like to see as much CSS1 as possible. 
</p> 
<p> 
If your design doesn't work in at least IE5+/Win and Mozilla (run 
by over 90% of the population), chances are we won't accept it. 
</p> 
</div> 
</body> 
</html> 

例子（點(diǎn)擊層顯示，點(diǎn)擊層隱藏）

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Style Example</title> 
<script type="text/javascript"> 
function toggle(sDivId) { 
var oDiv = document.getElementById(sDivId); 
oDiv.style.display = (oDiv.style.display == "none") ? "block" : //對(duì)象.style.display 顯示狀態(tài)：取值范圍： "none(不顯示)" "block(顯示)" 
"none"; 
} 
</script> 
</head> 
<body> 
<div style="background-color: blue; color: white; font-weight: bold; 
padding: 10px; cursor: pointer" 
onclick="toggle('divContent1')">Click Here</div> 
<div style="border: 3px solid blue; height: 100px; padding: 10px" 
id="divContent1">This is some content 
to show and hide.</div> 
<p>&nbsp;</p> 
<div style="background-color: blue; color: white; font-weight: bold; 
padding: 10px; cursor: pointer" <!-- cursor （指示鼠標(biāo)的顯示狀態(tài)（pointer(手)））--> 
onclick="toggle('divContent2')">Click Here</div> 
<div style="border: 3px solid blue; height: 100px; padding: 10px" 
id="divContent2">This is some content 
to show and hide.</div> 
</body> 
</html> 

例子（鼠標(biāo)移上，顯示層）

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>Style Example</title> 
<script type="text/javascript"> 
function showTip(oEvent) { 
var oDiv = document.getElementById("divTip1"); 
oDiv.style.visibility = "visible"; //對(duì)象.style.visibility 顯示狀態(tài)： 取值范圍是："visible(顯示)" "hidden(不顯示)" 和display用法相同，只是取值范圍不同 
oDiv.style.left = oEvent.clientX + 5; //顯示層的坐標(biāo)（鼠標(biāo)的橫坐標(biāo)+5） 
oDiv.style.top = oEvent.clientY + 5; //顯示層的坐標(biāo)（鼠標(biāo)的縱坐標(biāo)+5） 
} 
function hideTip(oEvent) { 
var oDiv = document.getElementById("divTip1"); 
oDiv.style.visibility = "hidden"; 
} 
</script> 
</head> 
<body> 
<p>Move your mouse over the red square.</p> 
<div id="div1" 
style="background-color: red; height: 50px; width: 50px" 
onmouseover="showTip(event)" onmouseout="hideTip(event)"></div> 
<div id="divTip1" 
style="background-color: yellow; position: absolute; visibility: 
hidden; padding: 5px"> 
<span style="font-weight: bold">Custom Tooltip</span><br /> 
More details can go here. 
</div> 
</body> 
</html> 