兼容性

ajax:

new XMLHttpRequest(); //IE7+
new ActiveXObject("Microsoft.XMLHTTP");

function creatajax(){ 
    var ajax=null; 
    if (window.XMLHttpRequest){ 
        //對于Mozilla、Netscape、Safari等瀏覽器,創建XMLHttpRequest對象 
        ajax = new XMLHttpRequest(); 
        if (ajax.overrideMimeType){ 
            //如果服務器響應的header不是text/xml,可以調用其它方法修改該header 
            ajax.overrideMimeType('text/xml'); 
        } 
    } else if (window.ActiveXObject){ 
        // 對于Internet Explorer瀏覽器,創建XMLHttpRequest 
        try{ 
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){ 
            try{ 
                ajax = new ActiveXObject("Msxml2.XMLHTTP"); 
            } catch (e){} 
        } 
    } 
    return ajax; 
}

input.type屬性問題

問題說明:

IE下 input.type 屬性為只讀;
但是Firefox下 input.type 屬性為讀寫。

解決辦法:

可以先隱藏原來的input,然后在同樣的位置再插入一個新的input元素。

window.event問題

問題說明:

window.event 只能在IE下運行,
而不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用。

解決方法:

在事件發生的函數上加上event參數,在函數體內(假設形參為evt),使用:

event = evt?evt:(window.event?window.event:null) 

event.x與event.y問題

問題說明:

IE下,even對象有x、y屬性,但是沒有pageX、pageY屬性;
Firefox下,even對象有pageX、pageY屬性,但是沒有x、y屬性。

解決方法:
var myX = event.x ? event.x : event.pageX; 
var myY = event.y ? event.y:event.pageY; 

event.srcElement問題

作用:獲得觸發事件的元素

問題說明:

IE下,even對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性。

訪問的父元素的區別

問題說明:

在IE下,使用 obj.parentElement 或 obj.parentNode 訪問obj的父結點;在firefox下,使用 obj.parentNode 訪問obj的父結點。

解決方法:

因為firefox與IE都支持DOM,因此統一使用obj.parentNode 來訪問obj的父結點。

innerText的問題.

問題說明:

innerText在IE中能正常工作,
但是innerText在FireFox中卻不行。

解決方法:

在非IE瀏覽器中使用textContent代替innerText。
示例:

if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = ";my text"; 
} 

對象寬高賦值問題

問題說明:

FireFox中類似 obj.style.height = imgObj.height 的語句無效。

解決方法:

統一使用

obj.style.height = imgObj.height + ‘px'; 

setAttribute('style','color:red;')

除了IE,現在所有瀏覽器都支持

解決辦法:

用object.style.cssText = ‘color:red;'

類名設置

問題說明:

setAttribute('class','styleClass')
IE不支持(指定屬性名為class,IE不會設置元素的class屬性,相反IE用setAttribute時識別className屬性)

解決辦法:
setAttribute('class','styleClass') 
setAttribute('className','styleClass') 
或者直接 
object.className='styleClass'; ```
IE和FF都支持object.className。 

####建立單選鈕 :
>IE以外的瀏覽器 

var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE: 

document.createElement(”<input name=”radiobtn” type=”radio” value=”checked” />”); ```

圓角:

ie8及以下 不支持 CSS3 中的圓角屬性。

事件冒泡與捕獲,默認行為

http://www.lxweimin.com/p/544275dbe0c3

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容