JS中相容性問題處理方法

本文主要和大家分享JS中相容性問題處理方法，希望能幫助大家。

1.關於取得行外樣式currentStyle 和getComputedStyle 出現的相容性問題
  我們都知道js透過style不可以取得行外樣式，當我們需要取得行外樣式:
  我們通常透過這兩個方法取得行外樣式：
  IE下: currentStyle
#  Chrome,FF下: getComputedStyle(op,false)
        與兩個瀏覽器的寫法：
    
#            alert(op.currentStyle.width);
        }else{##>## ;
        }
#    *附註:解決許多相容性寫法時,都是用if..else..





#封裝一個取得行外樣式的函數:(相容於所有瀏覽器,包含低版IE6,7)
        funtion getStyle(obj,name){
      obj.currentStyle){
                //IE
#         ##       }else{
                //Chrom,FF
                 }
        }

######    呼叫：getStyle(op,'width');######

2.關於用「索引」取得字串每一項出現的相容性問題:
  對字串也有類似陣列這樣的透過下標索引取得每一項的值,
    var str="abcde";
    aletr(str[1]);
    但是低版的瀏覽器IE6,7不相容
    相容方法:str.charAt(i)    //全部瀏覽器都相容於
    var str="abcde";
    for(var i=0;i
      alert(str.charAt(
      alert(str.charAt(

      alert(str.charAt(
      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
    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";
#####################################################################################11 #############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
      //IE.       oUl.firstChild.style.background='red';
    }

5 .關於使用event對象，出現的相容性問題
    如: 取得滑鼠位置
            IE/Chrom: event.clientX;event.clientY
#            FF/IE9以上/Chrom: 傳參ev--> ev.clientX;ev.clientY
    取得物件相容性寫法: var o o
##    取得物件相容性寫法: var o o==ev| |event;
        document.oncilck=function(ev){
            var 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以下)##  +ev,fn);
      }else{
        //FF,Chrome,IE9-10
# ,fn,false);
      }
    }
    myAddEvent(oBtn,'click',function(){
      alert(a);
    });
    myAddEvent(oBtn,'click',function(){

#####################. ###      alert(b);#########    });##################7.關於取得捲軸距離而出現的問題# ###########  當我們取得捲軸滾動距離:########        IE,Chrome: document.body.scrollTop#########  .documentElement.scrollTop#########相容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop#########相關推薦：####### ##一些js中兼容性易錯問題的總結############JavaScript中關於兼容性能的具體分析############JavaScript字串操作方法和瀏覽器相容性實例詳解######

以上是JS中相容性問題處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！