js當中的相容問題

1.關於獲取行外樣式 currentstyle 和 getcomputedstyle 出現的相容性問題

我們都知道js通過style不可以獲取行外樣式，當我們需要獲取行外樣式時:

我們一般通過這兩個方法獲取行外樣式：

ie下: currentstyle

chrome,ff下: getcomputedstyle(odiv,false)

相容兩個瀏覽器的寫法:

if(odiv.currentstyle)else

*注:在解決很多相容性寫法時,都是用if…else…

封裝乙個獲取行外樣式的函式:(相容所有瀏覽器,包括低版本ie6,7)

funtion getstyle(obj,name)else
}呼叫：getstyle(odiv,'width');

對於字串也有類似於 陣列 這樣的通過 下標索引 獲取每一項的值,

var str=「abcde」;

aletr(str[1]);

但是低版本的瀏覽器ie6,7不相容

相容方法:str.charat(i) //全部瀏覽器都相容

var str=「abcde」;

for(var i=0;i3.關於dom中 childnodes 獲取子節點出現的相容性問題

childnodes:獲取子節點,

–ie6-8:獲取的是元素節點,正常

–高版本瀏覽器:但是會包含文字節點和元素節點(不正常)

解決方法: 使用nodetype:節點的型別，並作出判斷

–nodetype=3–>文字節點

–nodetype=1–>元素節點

例: 獲取ul裡所有的子節點，讓所有的子節點背景色變成紅色

獲取元素子節點相容的方法:

var oul=document.getelementbyid(『ul』);

for(var i=0;i4.關於使用 firstchild,lastchild 等，獲取第乙個/最後乙個元素節點時產生的問題

–ie6-8下: firstchild,lastchild,nextsibling,previoussibling,獲取第乙個元素節點

(高版本瀏覽器ie9+,ff,chrome不相容,其獲取的空白文字節點)

–高版本瀏覽器下: firstelementchild,lastelementchild,nextelementsibling,previouselementsibling

(低版本瀏覽器ie6-8不相容)

–相容寫法: 找到ul的第乙個元素節點,並將其背景色變成紅色

var oul=document.getelementbyid(『ul』);

if(oul.firstelementchild)else

5.關於使用 event物件，出現的相容性問題

如: 獲取滑鼠位置

ie/chrom: event.clientx;event.clienty

ff/ie9以上/chrom: 傳參ev–> ev.clientx;ev.clienty

獲取event物件相容性寫法: var oeventev||event;

document.oncilck=function(ev)

}6.關於為乙個元素繫結兩個相同事件：attachevent/attacheventlister 出現的相容問題

事件繫結:(不相容需要兩個結合做相容if…else…)

ie8以下用: attachevent(『事件名』,fn);

ff,chrome,ie9-10用: attacheventlister(『事件名』,fn,false);

多事件繫結封裝成乙個相容函式:

function myaddevent(obj,ev,fn)else

}myaddevent(obtn,『click』,function());

myaddevent(obtn,『click』,function());

7.關於獲取滾動條距離而出現的問題

當我們獲取滾動條滾動距離時:

ie,chrome: document.body.scrolltop

ff: document.documentelement.scrolltop

相容處理:var scrolltop=document.documentelement.scrolltop||document.body.scrolltop

js相容問題

獲取非行內樣式的相容方式 複製 function getstyle obj,attr else 複製 獲取事件物件的相容方式 document.nclick function eve 事件冒泡的相容方法 複製 function stopbubble e else 複製 阻止瀏覽器預設行為的相容方法 ...

JS相容問題總結

1.阻止事件冒泡的相容 if event.stoppropagation else 2.阻止預設瀏覽器事件的相容 function stopdefault event else 3.事件解綁的相容 function bind ele,type,callback else ele 將要繫結事件的物件 ...

js相容問題總結

01 獲取滾動條滾動的距離 var stop document.documentelement.scrolltop document.body.scrolltop 02 獲取非行間樣式 ie currentstyle attr 標準 getcomputedstyle attr function ge...