1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
我们一般通过这两个方法获取行外样式：
下: currentStyle
下: 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++){
放回字符串中的每一项
    }


3.关于DOM中 childNodes 获取子节点出现的兼容性问题
获取子节点,
获取的是元素节点,正常
高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法: 使用nodeType:节点的类型，并作出判断
文本节点
元素节点
例: 获取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属性。

var oUl=document.getElementById('ul');
      oUl.children.style.background="red";




4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时产生的问题
下: 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
以上/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..)
以下用: attachEvent('事件名',fn);
用: attachEventLister('事件名',fn,false);

多事件绑定封装成一个兼容函数:
    function myAddEvent(obj,ev,fn){
      if(obj.attachEvent){
以下
        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

 

 

 

 

javaScript中一些常见的兼容性问题整理

1）滚动条：
document.documentElement.scrollTop||document.body.scrollTop
 
2) 获取样式兼容
functiongetStyle(dom, styleName){
return dom.currentStyle?
dom.currentStyle[styleName]
getComputedStyle(dom)[styleName];
}
 
3) 网页可视区域兼容
window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidth
 
4） 事件对象兼容
evt = evt || window.event;
 
5） 阻止事件冒泡兼容
event.stopPropagation?
event.stopPropagation():event.cancelBubble=true;
 
6）阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
 
7）事件监听兼容
if(document.all){
dom.attactEvent(“onclick”, fn);
} else {
dom.addEventListener(“click”, fn);
}
 
8）事件目标对象兼容
var t = event.target || event.srcElement;