js常见兼容性问题举例包含完整代码

1.关于使用 event对象，出现的兼容性问题
    
            IE/Chrom: event.clientX;event.clientY
            FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY
    获取event对象兼容性写法: var oEvent==e||window.event;
        document.oncilck=function(e){
            var oEvent==e||window.event;
            if(oEvent){
                alert(oEvent.clientX);
            }
        }

//举例说明 完整代码

2.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题

var oDiv  =document.getElementById('demo')

alert(getComputedStyle(oDiv).height);//不兼容IE8 以下版本

alert(oDiv.currentStyle.height);//兼容IE所有版本,opera

 if (oDiv.currentStyle){
 alert(oDiv.currentStyle.height)
 }else{
 alert(getComputedStyle(oDiv).height);
 }

举例兼容两个浏览器的写法:

function getStyle(obj,attr){
var arr =attr.match(/\w+/g);
attr = arr.join("");
console.log(attr);
if (obj.currentStyle){
return obj.currentStyle[attr];

}else{
return getComputedStyle(obj,false)[attr];
}
}

oBox.style.height = getStyle(oDiv,"height");

1.

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";
parentNode不存在兼容问题，通过子元素找父节点


4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时的兼容
 firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点，不兼容IE低版本
 firstElementChild,lastElementChild,nextElementSibling,previousElementSibling 高版本浏览器下
  --兼容写法: 

oBox.firstChild||oBox.lastElementChild

5.添加监听时间addEventListerner/attachEvent 出现的兼容问题

    IE8以下低版本: attachEvent('事件名',fn);
    FF,Chrome,IE高版本用: attachEventLister('事件名',fn,false/true);
   _oBox.addEventListerner("click",function(){

},true)

 _oBox.attachEvent("onclick",function(){

},true)

*封装事件监听 目的：解决兼容问题

function packageEventListerner(_current,_type,_deal,_capture){

//_current当前触发的对象 _type触发事件的类型(click,mouseover..),_deal需要处理的函数 ，_capture是否需要捕获

if(_current.addEventListerner){

_current.addEventListerner(_type,_deal,_capture)

}else{

_current.attachEvent(_type,_capture)

}
}

//会持续更新

}//代码结束

7.关于获取滚动条距离而出现的问题
Chrome浏览器document.body

FF,Opera和IE浏览器document.documentElement.scrollTop
兼容处理:

window.οnscrοll=function(){

   document.documentElement.scrollTop||document.body.scrollTop

}

//简单举例点击底部回到顶部（代码全，无省略）