3 設置元素的class屬性

IE是當前瀏覽器的一個異類，不過解決方法倒也相當簡單，使用Firefox和Safari 之 類的瀏覽時，可以使用元素的setArribute方法來設置元素的class屬性，如下所示：

var element = document.getElementById("myElement");

element.setAttribute("class","styleClass");

奇怪的是，如果使用setAttribute方法，并指定屬性名為class，IE并不會設置元素的 class屬性。相反，只使用setAttribute方法時IE會自己識別className屬性。

對于這種情況，完備的解決方法是：使用元素的setAttribute方法時，將class和 className都用作屬性名，如下所示：

var element = document.getElementById("myElement");

element.setAttribute("class","styleClass");

element.setAttribute("className","styleClass");

當前大多數瀏覽器都會使用class屬性名而忽略className,IE則正好相反。

4 創(chuàng)建輸入元素

   輸入元素為用戶提供了頁面交互的手段，HTML本身有一組有限的輸入元素，包括單行文 框、多行文本框、選擇框、選擇框、按鈕、復選框和單行鈕。你可能想使用Javascrīpt 動態(tài)地創(chuàng)建這樣一些輸入元素作為Ajax實現的一部分。

   單行文本框、按鈕、復選框和單選鈕都可以創(chuàng)建為輸入元素，只是type屬性的值有所不同。選擇框和文本區(qū)有自己特有的標記，通過Javascrīpt動態(tài)創(chuàng)建輸入元素很簡單（但單選鈕除外），只要遵循一些簡單的規(guī)則就行。使用document.createElement方法可以很容易創(chuàng)建選擇框和文本區(qū)，只需向document.createElement傳遞元素的標記名，如select或textarea。

單行文本框、按鈕、復選框和單選鈕稍難一點，因為它們都有同樣的元素名input，只 是type屬性的值不同。所以，要創(chuàng)建這些元素，不僅需要使用document.createElement方法， 后面還要調用元素的setAttribute方法來設置type屬性的值。這并不難，但確實要多加一 行代碼。

   考慮在哪里把新創(chuàng)建的輸入元素增加到其父元素中，必須注意document.createElement 和setAttribute語句的順序。在某些瀏覽器中，只有創(chuàng)建了元素，而且正確設置了type屬性時，才會把新創(chuàng)建的元素增加到其父元素中。例如，以下代碼段在某些瀏覽器中可能有奇怪的行為：

document.getElementById("formElement").appendChild(button);

button.setAttribute("type","button");

為了避免奇怪的行為，要確保創(chuàng)建輸入元素的一設置其所有屬性，特別是type屬性， 如下：

var button = document.createElement("input");

button.setAttribute("type","button");

document.getElementById("formElement").appendChild(buttion);

遵循這個簡單的規(guī)則，有助于消除以后可能出現的一些難于診斷的問題。

5.向輸入元素增加事件處理程序

向輸入元素增加事件處理程序應該與使用setAttribute方法并指定事件程序的名字和所需函數程序的名字一樣容易，對嗎？錯。設置元素的事件處理程序的標準做法是使用元素的 setAttribute方法，它以事件名作為屬性名，并把函數處理程序作為屬性值，如下所示：

var formElement = document.getElementById("formElement");

formElement.setAttribute("onclick","doFoo();");

除了IE，上面的代碼在所有當前瀏覽器中都能工作，如果在IE中使用Javascrīpt設置 的事件處理程序，必須對元素使用點記法來引用所需的事件處理程序，并把它賦為匿名函數， 這個匿名函數要調用所需要的事件處理程序，如下所示：
var formElement = documentgetElementById("formElement");

formElement.onclick = function(){ doFoo(); };

幸運的是，這種技術得到了IE和所有其他當前瀏覽器的支持，所以完全可以通過 Javascrīpt動態(tài)地設置表單元素的事件處理程序。

6 創(chuàng)建單選鈕

除了IE，當前所有其他瀏覽器都允許使用以下方法創(chuàng)建單選鈕（這些方法應該能想到);

var readioButtion = document.createElement("input");

readioButtion.setAttribute("type","radio");

readioButtion.setAttribute("name","radioButtion");

readioButtion.setAttribute("value","checked");

這樣就能在除IE以外的所有當前瀏覽器中創(chuàng)建單選鈕，而且能正常工作。在IE中， 單選鈕確實會顯示出來，但是無法將其選中，因為點擊單選鈕并不按我們預想得那樣使之選 中。在IE中，創(chuàng)建單行鈕的方法與其他瀏覽器所用的方法完全不同，而且根本不兼容。對于 前面建立的單選鈕，在IE中可以如下建立：

var radioButtion = document.createElement("<input type='radio' name='radioButtion' value ='checked'>");

這就需要某種瀏覽器嗅探(browser-sniffing)機制。IE能識別出名為uniqueID的document對象的專用屬性，名為uniqueID。IE也是惟一能 識別這個屬性的瀏覽器，所以uniqueID很適合來確定腳本是不是在IE中運行。

使用document.uniqueID屬性來確定腳本在哪個瀏覽器中運行時，可以結合IE特定的方 法和標準兼容的方法，就會得到以下代碼：

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");

}

最新評論