原生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

 

八、鍵盤事件 keyCode 兼容性寫法

var inp = document.getElementById('inp')

var result = document.getElementById('result')

 

function getKeyCode(e) {

 e = e ? e : (window.event ? window.event : "")

 return e.keyCode ? e.keyCode : e.which

}

 

inp.onkeypress = function(e) {

 result.innerHTML = getKeyCode(e)

}

 

九、求窗口大小的兼容寫法

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

IE,Chrome: document.body.scrollTop

FF: document.documentElement.scrollTop

// 瀏覽器窗口可視區域大小（不包括工具欄和滾動條等邊線）

// 1600 * 525

var client_w = document.documentElement.clientWidth || document.body.clientWidth;

var client_h = document.documentElement.clientHeight || document.body.clientHeight;

 

// 網頁內容實際寬高（包括工具欄和滾動條等邊線）

// 1600 * 8

var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;

var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

 

// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）

// 1600 * 8

var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;

var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

 

// 滾動的高度

var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

 

10.DOM 事件處理程序的兼容寫法（能力檢測）

var eventshiv = {

  // event兼容

  getEvent: function(event) {

    return event ? event : window.event;

  },

 

  // type兼容

  getType: function(event) {

    return event.type;

  },

 

  // target兼容

  getTarget: function(event) {

    return event.target ? event.target : event.srcelem;

  },

 

  // 添加事件句柄

  addHandler: function(elem, type, listener) {

    if (elem.addEventListener) {

      elem.addEventListener(type, listener, false);

    } else if (elem.attachEvent) {

      elem.attachEvent('on' + type, listener);

    } else {

      // 在這裏因爲.與'on'字符串不能連接，只能用 []

      elem['on' + type] = listener;

    }

  },

 

  // 移除事件句柄

  removeHandler: function(elem, type, listener) {

    if (elem.removeEventListener) {

      elem.removeEventListener(type, listener, false);

    } else if (elem.detachEvent) {

      elem.detachEvent('on' + type, listener);

    } else {

      elem['on' + type] = null;

    }

  },

 

  // 添加事件代理

  addAgent: function (elem, type, agent, listener) {

    elem.addEventListener(type, function (e) {

      if (e.target.matches(agent)) {

        listener.call(e.target, e); // this 指向 e.target

      }

    });

  },

 

  // 取消默認行爲

  preventDefault: function(event) {

    if (event.preventDefault) {

      event.preventDefault();

    } else {

      event.returnValue = false;

    }

  },

 

  // 阻止事件冒泡

  stopPropagation: function(event) {

    if (event.stopPropagation) {

      event.stopPropagation();

    } else {

      event.cancelBubble = true;

    }

  }

};

11.解決 IE9 如下瀏覽器不能使用 opacity

opacity: 0.5;

filter: alpha(opacity = 50);

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

 

12.爲一個元素綁定兩個相同事件：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);

  }

 }

 

13.獲取元素的非行間樣式值

function getStyle(object,oCss) {

    if (object.currentStyle) {

     return object.currentStyle[oCss];//IE

    }else{

     return getComputedStyle(object,null)[oCss];//除了IE

    }

  }

 

14.節點加載

//火狐下特有的節點加載事件，就是節點加載完才執行，和onload不一樣

//感受用到的很少，直接把js代碼放在頁面結構後面同樣能實現。。

document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加載完成。好像除IE6-8均可以.