js兼容性

常见js兼容性

1，JSON.stringify()

在ie7下报错，JSON未定义，解决办法引入json2.js

var a={a:1,b:2};
var b=JSON.stringify(a);
alert(b);

2，getElementsByClassName() 和 obj.setAttribute();

getElementsByClassName(),ie8及其以下都不支持这个方法

setAttribute(),ie都不支持此方法

解决ie不支持getElementsByClassName()方法：

var claro=document.getElementsByClassName("claro");
claro[0].setAttribute("name","xiaoming");

3. js绑定事件兼容

var  el=document.getElementById("id");

//ie
if(el.attachEvent){
   el.attachEvent('onclick',fn);
//非ie
}else if(el.addEventListener){

//false事件句柄在冒泡阶段执行,true事件句柄在捕获阶段执行
el.addEventListener("click",fn,false); }else{ el['onclick']=fn; }

4.ajax兼容

var  xhr;

if(window.ActiveObjectX){//ie
   xhr=new window.ActiveObjectX('Microsoft.XMLHTTP');
}else{//非ie
   xhr=new XMLHttpRequest();
}

5.原生js获取元素的样式： 

style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

currentStyle可以弥补style的不足，但是只适用于IE。

getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。

var oDiv=document.getElementById('div1');
getStyle(oDiv,'width');
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

 6.Object.prototype.toString判断数据类型：

    Object.prototype.toString.apply(null) 结果："[object Null]"，ie6/7/8 返回 "[object Object]"

    Object.prototype.toString.apply(undefined) 结果："[object Undefined]"，ie6/7/8 返回 "[object Object]"

 7.当前事件的源

    var target=e.target||e.srcElement;    

    //根据事件的冒泡原理，找到需要变更class 的LI元素
    while(target.tagName!='LI' || target.tagName=='BODY'){
       target=target.parentNode;
    }　

   //给当前元素加上class big
   target.className += ' big';

8.常见兼容代码:

function addEventListener(target,type,handler){
     if(target.addEventLister){
         target.addEventLister(type,handler);
     }else if(target.attachEvent){
         target.attachEvent('on'+type,function(){
            handler.call(target);
         })
     }else{
        target['on'+type]=handler;

     }
}

function removeEventLister(target,type,handler){
    if(target.removeEventListener){
       target.removeEventListener(type,handler);
    }else if(target.detachEvent){
       target.detachEvent('on'+type,handler);
    }else{
       target['on'+type]=null;
    }
}

//获取目标对象

function getTarget(e){
    var e=window.event||e,target;
    if(e.target){
       target=e.target;
    }else{
       target=e.srcElement;
    }
    return target;
}

//停止冒泡

function stopPropagation(e){
    var e=window.event||e;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble=true;
    }
}

//阻止默认行为

function preventDefault(e){
    var e=window.event||e;
    if(e.preventDefault){
      e.preventDefault();
    }else{
      e.returnValue=false;
    }
}