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