本文主要和大家分享js中兼容性问题处理方法，希望能帮助到大家。
1.关于获取行外样式 currentstyle 和 getcomputedstyle 出现的兼容性问题
  我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
  我们一般通过这两个方法获取行外样式：
  ie下: currentstyle
  chrome,ff下: getcomputedstyle(op,false)
        兼容两个浏览器的写法:
        if(op.currentstyle){
            alert(op.currentstyle.width);
        }else{
            alert(getcomputedstyle(op,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(op,'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
相关推荐：
一些js中兼容性易错问题的总结
javascript中关于兼容性能的具体分析
javascript字符串操作方法和浏览器兼容性实例详解
以上就是js中兼容性问题处理方法的详细内容。