? ? ? ? ? ? ? ? ? ? ? JS中出現(xiàn)的兼容性問題的總結(jié)
1.關(guān)于獲取行外樣式 currentStyle 和 getComputedStyle 出現(xiàn)的兼容性問題
我們都知道js通過style不可以獲取行外樣式，當(dāng)我們需要獲取行外樣式時(shí):
我們一般通過這兩個(gè)方法獲取行外樣式：
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容兩個(gè)瀏覽器的寫法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解決很多兼容性寫法時(shí),都是用if..else..
封裝一個(gè)獲取行外樣式的函數(shù):(兼容所有瀏覽器,包括低版本IE6,7)
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
?? ?調(diào)用：getStyle(oDiv,'width');
2.關(guān)于用“索引”獲取字符串每一項(xiàng)出現(xiàn)的兼容性問題:
對(duì)于字符串也有類似于 數(shù)組 這樣的通過 下標(biāo)索引 獲取每一項(xiàng)的值,
var str="abcde";
aletr(str[1]);
但是低版本的瀏覽器IE6,7不兼容
兼容方法:str.charAt(i)?? ?//全部瀏覽器都兼容
var str="abcde";
for(var i=0;i
alert(str.charAt(i));?? //放回字符串中的每一項(xiàng)
}
3.關(guān)于DOM中 childNodes 獲取子節(jié)點(diǎn)出現(xiàn)的兼容性問題
childNodes:獲取子節(jié)點(diǎn),
--IE6-8:獲取的是元素節(jié)點(diǎn),正常
--高版本瀏覽器:但是會(huì)包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)(不正常)
解決方法: 使用nodeType:節(jié)點(diǎn)的類型，并作出判斷
--nodeType=3-->文本節(jié)點(diǎn)
--nodeTyPE=1-->元素節(jié)點(diǎn)
例: 獲取ul里所有的子節(jié)點(diǎn)，讓所有的子節(jié)點(diǎn)背景色變成紅色
獲取元素子節(jié)點(diǎn)兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面childNodes為我們帶來的困擾完全可以有children屬性來代替。
children屬性:只獲取元素節(jié)點(diǎn),不獲取文本節(jié)點(diǎn),兼容所有的瀏覽器泌绣，
比上面的好用所以我們一般獲取子節(jié)點(diǎn)時(shí),最好用children屬性。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
4.關(guān)于使用 firstChild,lastChild 等，獲取第一個(gè)/最后一個(gè)元素節(jié)點(diǎn)時(shí)產(chǎn)生的問題
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,獲取第一個(gè)元素節(jié)點(diǎn)
(高版本瀏覽器IE9+,FF,Chrome不兼容,其獲取的空白文本節(jié)點(diǎn))
--高版本瀏覽器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本瀏覽器IE6-8不兼容)
--兼容寫法: 找到ul的第一個(gè)元素節(jié)點(diǎn),并將其背景色變成紅色
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//高版本瀏覽器
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}
5.關(guān)于使用 event對(duì)象，出現(xiàn)的兼容性問題
如: 獲取鼠標(biāo)位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 傳參ev--> ev.clientX;ev.clientY
獲取event對(duì)象兼容性寫法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
6.關(guān)于為一個(gè)元素綁定兩個(gè)相同事件：attachEvent/attachEventLister 出現(xiàn)的兼容問題
事件綁定:(不兼容需要兩個(gè)結(jié)合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
多事件綁定封裝成一個(gè)兼容函數(shù):
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});
7.關(guān)于獲取滾動(dòng)條距離而出現(xiàn)的問題
當(dāng)我們獲取滾動(dòng)條滾動(dòng)距離時(shí):
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
