原生JS的兼容性问题

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

　封装一个获取行外样式的函数:(兼容全部浏览器,包括低版本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)    //所有浏览器都兼容

3.关于DOM中 childNodes 获取子节点出现的兼容性问题

　　 childNodes:获取子节点,
　　 --IE6-8:获取的是元素节点,正常
　　 --高版本浏览器:可是会包含文本节点和元素节点(不正常)

　　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对象，出现的兼容性问题

 　　var oEvent==ev||event;

6.关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题

　　多事件绑定封装成一个兼容函数:
    　　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);
   　　 });
7.关于获取滚动条距离而出现的问题

　　兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

八、键盘事件 keyCode 兼容性写法

　　function getKeyCode(e) {

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

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

　　}

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

　　当咱们获取滚动条滚动距离时:

　　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均可以.