開(kāi)發(fā)跨瀏覽器的JavaScript方法說(shuō)明第2/2頁(yè)
3 設(shè)置元素的class屬性
IE是當(dāng)前瀏覽器的一個(gè)異類(lèi),不過(guò)解決方法倒也相當(dāng)簡(jiǎn)單,使用Firefox和Safari 之 類(lèi)的瀏覽時(shí),可以使用元素的setArribute方法來(lái)設(shè)置元素的class屬性,如下所示:
var element = document.getElementById("myElement");
element.setAttribute("class","styleClass");
奇怪的是,如果使用setAttribute方法,并指定屬性名為class,IE并不會(huì)設(shè)置元素的 class屬性。相反,只使用setAttribute方法時(shí)IE會(huì)自己識(shí)別className屬性。
對(duì)于這種情況,完備的解決方法是:使用元素的setAttribute方法時(shí),將class和 className都用作屬性名,如下所示:
var element = document.getElementById("myElement");
element.setAttribute("class","styleClass");
element.setAttribute("className","styleClass");
當(dāng)前大多數(shù)瀏覽器都會(huì)使用class屬性名而忽略className,IE則正好相反。
4 創(chuàng)建輸入元素
輸入元素為用戶(hù)提供了頁(yè)面交互的手段,HTML本身有一組有限的輸入元素,包括單行文 框、多行文本框、選擇框、選擇框、按鈕、復(fù)選框和單行鈕。你可能想使用Javascrīpt 動(dòng)態(tài)地創(chuàng)建這樣一些輸入元素作為Ajax實(shí)現(xiàn)的一部分。
單行文本框、按鈕、復(fù)選框和單選鈕都可以創(chuàng)建為輸入元素,只是type屬性的值有所不同。選擇框和文本區(qū)有自己特有的標(biāo)記,通過(guò)Javascrīpt動(dòng)態(tài)創(chuàng)建輸入元素很簡(jiǎn)單(但單選鈕除外),只要遵循一些簡(jiǎn)單的規(guī)則就行。使用document.createElement方法可以很容易創(chuàng)建選擇框和文本區(qū),只需向document.createElement傳遞元素的標(biāo)記名,如select或textarea。
單行文本框、按鈕、復(fù)選框和單選鈕稍難一點(diǎn),因?yàn)樗鼈兌加型瑯拥脑孛鹖nput,只 是type屬性的值不同。所以,要?jiǎng)?chuàng)建這些元素,不僅需要使用document.createElement方法, 后面還要調(diào)用元素的setAttribute方法來(lái)設(shè)置type屬性的值。這并不難,但確實(shí)要多加一 行代碼。
考慮在哪里把新創(chuàng)建的輸入元素增加到其父元素中,必須注意document.createElement 和setAttribute語(yǔ)句的順序。在某些瀏覽器中,只有創(chuàng)建了元素,而且正確設(shè)置了type屬性時(shí),才會(huì)把新創(chuàng)建的元素增加到其父元素中。例如,以下代碼段在某些瀏覽器中可能有奇怪的行為:
document.getElementById("formElement").appendChild(button);
button.setAttribute("type","button");
為了避免奇怪的行為,要確保創(chuàng)建輸入元素的一設(shè)置其所有屬性,特別是type屬性, 如下:
var button = document.createElement("input");
button.setAttribute("type","button");
document.getElementById("formElement").appendChild(buttion);
遵循這個(gè)簡(jiǎn)單的規(guī)則,有助于消除以后可能出現(xiàn)的一些難于診斷的問(wèn)題。
5.向輸入元素增加事件處理程序
向輸入元素增加事件處理程序應(yīng)該與使用setAttribute方法并指定事件程序的名字和所需函數(shù)程序的名字一樣容易,對(duì)嗎?錯(cuò)。設(shè)置元素的事件處理程序的標(biāo)準(zhǔn)做法是使用元素的 setAttribute方法,它以事件名作為屬性名,并把函數(shù)處理程序作為屬性值,如下所示:
var formElement = document.getElementById("formElement");
formElement.setAttribute("onclick","doFoo();");
除了IE,上面的代碼在所有當(dāng)前瀏覽器中都能工作,如果在IE中使用Javascrīpt設(shè)置 的事件處理程序,必須對(duì)元素使用點(diǎn)記法來(lái)引用所需的事件處理程序,并把它賦為匿名函數(shù), 這個(gè)匿名函數(shù)要調(diào)用所需要的事件處理程序,如下所示:
var formElement = documentgetElementById("formElement");
formElement.onclick = function(){ doFoo(); };
幸運(yùn)的是,這種技術(shù)得到了IE和所有其他當(dāng)前瀏覽器的支持,所以完全可以通過(guò) Javascrīpt動(dòng)態(tài)地設(shè)置表單元素的事件處理程序。
6 創(chuàng)建單選鈕
除了IE,當(dāng)前所有其他瀏覽器都允許使用以下方法創(chuàng)建單選鈕(這些方法應(yīng)該能想到);
var readioButtion = document.createElement("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
這樣就能在除IE以外的所有當(dāng)前瀏覽器中創(chuàng)建單選鈕,而且能正常工作。在IE中, 單選鈕確實(shí)會(huì)顯示出來(lái),但是無(wú)法將其選中,因?yàn)辄c(diǎn)擊單選鈕并不按我們預(yù)想得那樣使之選 中。在IE中,創(chuàng)建單行鈕的方法與其他瀏覽器所用的方法完全不同,而且根本不兼容。對(duì)于 前面建立的單選鈕,在IE中可以如下建立:
var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");
這就需要某種瀏覽器嗅探(browser-sniffing)機(jī)制。IE能識(shí)別出名為uniqueID的document對(duì)象的專(zhuān)用屬性,名為uniqueID。IE也是惟一能 識(shí)別這個(gè)屬性的瀏覽器,所以u(píng)niqueID很適合來(lái)確定腳本是不是在IE中運(yùn)行。
使用document.uniqueID屬性來(lái)確定腳本在哪個(gè)瀏覽器中運(yùn)行時(shí),可以結(jié)合IE特定的方 法和標(biāo)準(zhǔn)兼容的方法,就會(huì)得到以下代碼:
if(document.uniqueID){
//Internet Explorer
var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");
}
else{
//Standards Compliant
var readioButtion = document.createElement("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
}
相關(guān)文章
JavaScript知識(shí)點(diǎn)總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類(lèi)型
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類(lèi)型的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05es6函數(shù)之尾調(diào)用優(yōu)化實(shí)例分析
這篇文章主要介紹了es6函數(shù)之尾調(diào)用優(yōu)化,結(jié)合實(shí)例形式分析了es6函數(shù)尾調(diào)用優(yōu)化相關(guān)功能、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04javascript實(shí)現(xiàn)頁(yè)面刷新時(shí)自動(dòng)清空表單并選中的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)頁(yè)面刷新時(shí)自動(dòng)清空表單并選中的方法,涉及javascript中reset與focus方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法
這篇文章主要介紹了IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法,算是IE的一個(gè)BUG吧,本文提供了2個(gè)方法解決這個(gè)問(wèn)題,需要的朋友可以參考下2014-07-07JS基于正則表達(dá)式實(shí)現(xiàn)的密碼強(qiáng)度驗(yàn)證功能示例
這篇文章主要介紹了JS基于正則表達(dá)式實(shí)現(xiàn)的密碼強(qiáng)度驗(yàn)證功能,涉及javascript事件響應(yīng)及基于正則的字符遍歷、判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題
下面小編就為大家分享一篇解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02