(三)CSS DOM 編程

1. IE4.0為 每一個Web頁面元素 引入了一個style對象來管理元素的css樣式，最后被DOM沿用至今
2. 改變border line的代碼

var ?oDiv? = ?document.getElementById( " div1 " );
oDiv.style.border? = ? " 1px?solid?black " ;

3. 通過下面的代碼，可以實現hover的效果

<!----> < div? id ="div1" ?onmouseover ="this.style.backgroundColor='blue'" ?onmouseout ="this.style.backgroundColor='red'" >

4. style對象有一些方法,這些是DOM標準里面有的，但是IE不支持，所以最好還是直接使用style的屬性,如：style.backgroundColor的形式來設置style的property值比較好。
??? style.getPropertyValue(propertyName);
??? style.getPropertyPriority();
??? style.item(index);
??? style.removeProperty(propertyName);
??? style.setProperty(propertyName, value, privority);
5. Copy下面的內容到txt文件，然后改后綴為.htm，用IE打開，可以看到一個黃色的Tip，主要原理是操作style.Visibility屬性，這個屬性和style.display是不一樣的，前者只是控制visible，不會影響布局，后者不僅僅控制visible，還會影響布局。

<!----> <! DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html? xmlns ="http://www.w3.org/1999/xhtml" >
??? < head >
??? ??? < title > Style?Example </ title >
??? ??? < script? type ="text/ecmascript" >
??? ??? ??? function ?showTip(oEvent)
??? ??? ??? {
??? ??? ??????? var ?oDiv? = ?document.getElementById( " divTip1 " );
??? ??? ??????? oDiv.style.visibility? = ? " visible " ;
??? ??? ??????? oDiv.style.left? = ?oEvent.clientX? + ? 5 ;
??? ??? ??????? oDiv.style.top? = ?oEvent.clientY? + ? 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(window.event)" ?onmouseout ="hideTip(window.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 >

6. 下面代碼利用style的display屬性控制折疊功能

<!----> <! DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html? xmlns ="http://www.w3.org/1999/xhtml" >
???? < head >
???????? < title > Toggle?Example </ title >
???????? < script? type ="text/ecmascript" >
???????????? function ?toggle(sDivId)
???????????? {
???????????????? var ?oDiv? = ?document.getElementById(sDivId);
????????????????oDiv.style.display? = ?(oDiv.style.display? == ? " 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
???????????? id ="divContent1" ?
????????????style ="border:3px?solid?blue;?height:100px;?padding:10px" >
????????????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"
????????????onclick ="toggle('divContent2')" >
????????????Click?here
???????? </ div >
???????? < div
???????????? id ="divContent2"
????????????style ="border:?3px?solid?blue;?height:10px;?padding:10px" >
????????????This?is?some?content?to?show?and?hide.
???????? </ div >
???? </ body >
</ html >

6. 有些元素通過設置class屬性來設置樣式，我們可以通過 document.styleSheets 集合拿到當前文檔所有的css class。如果修改css class的設置，將影響所有的使用這個css class的元素。
??? DOM中可以使用 document.styleSheets[0]. css Rulers ,但是IE中對應的屬性叫 document.styleSheets[0].rulers
7. 我們可以為一個element設置style，也可以給它的父Element設置style，還可以設置css class，最后我們在瀏覽器看到的效果是所有這些設置的合并，IE提供或者最后看到的style的屬性是 element.currentStyle ，它是只讀的。DOM提供的是一個方法,可以通過 document.defaultView.getComputedStyle( element , hover ) 獲得，第一個參數是元素， 第二個參數是偽類：:hover,:first-letter.

(四) 表單(Form)操作

1. 創建表單元素是為了滿足用戶向服務器發送數據的要求，Web表單使用的Html元素有<form/>,<input/>,<select/>,<textarea/>等
2. <form/>用來向服務器傳輸數據，它的屬性有：
??? method?? 表示瀏覽器發送GET請求或是發送POST請求。
??? action?? ?? 表示表單所要提交到的地址URL。
??? enctype?? 當向服務器提交數據時，數據應該使用的編碼方法，默認是application/x-www-url-encoded,不過，如果要上傳文件，可以設置multipart/form-data
??? accept??? 當上傳文件時候，列出服務器能正確處理的mime類型。
??? accept-charset? ? 當提交數據時，列出服務器接受的字符編碼。

3. <input/>元素是Html的主要輸入元素。通過type特性來判斷是哪種輸入控件：
??? “text"
??? "radio"
??? "checkbox"
??? "file"
??? "password"
??? "button"
??? "submit"
??? "reset"
??? "hidden"
??? "image"

4. 獲取Form使用 document.getElementById() 或者 document.forms["formId"], document.forms[0] .

5. 獲取Form上的輸入字段 oForm.elements[0], oForm.elements["textbox1"], oForm.textbox1, oForm["textbox1"]

6. Form 上的方法： form.submit(), form.reset()

7. <input/>有一些屬性：
??? <input type="text" validchars = ”0123456789“/>
??? <input type="text" invalidchars = ”0123456789“/>
??? 控制input可以輸入的字符，除了設置上面的屬性，還要考慮用戶paste，
??? 在IE里面，可以直接<input text="text" onpaste="return false"/>
??? 對于其它的瀏覽器，需要組織菜單paste和Ctrl + V來paste
??? <input type="text" invalidchars="0123456789" onpaste="return false" oncontextmenu="return false"
??? ?? onkeypress="return blcokchars(this, event, true)/>

<!----> function ?blockChars(oTextbox,?oEvent,?bBlockPaste)
{
???? var ?sInvalidChars? = ?oTextbox.getAttribute( " invalidchars " );
???? var ?sChar? = ?String.fromCharCode(oEvent.charCode);
???? var ?bIsValidChar? = ?sInvalidChars.indexOf(sChar)? == ? - 1 ;
????
???? if ?(bBlockPaste)
???? {
???????? return ?bIsValidChar? && ? ! (oEvent.ctrlKey? && ?sChar? == ? " v " );
????}
???? else
???? {
???????? return ?bIsValidChar? || ?oEvent.ctrlKey;
????}
}

8. 對于<select/>,我們使用oListbox.options[0]來獲得選項。

?

Javascript DOM