兼容W3C与IE的API方法汇总（持续补充中）

“为什么世上偏偏有个IE”？

从IE10+ 才开始全面兼容W3C，但目前仍有很多用户使用较早版本的IE浏览器。

开发中，IE的不兼容问题让人很纠结，IE有很多独有的API，并没有完全遵循W3C规范，所以要针对IE编写许多代码，增加代码量。

1. 获取元素样式的值

var element = document.getElementById("user");

W3C：window.getComputedStyle(element, null)["color"]; //

IE： element.style["color"];

2. 添加样式

var sheet = document.styleSheets[0];//得到引入的第一个样式集

var selectText = "body"; //选择标签

var cssText = "background-color:#333"; //样式文本

var position = 0; //要插入的位置

W3C：sheet.insertRule(selectText+"{"+cssText+"}",position);

IE：sheet.addRule(selectText,cssText,position);

3. 移除样式

W3C：sheet.deleteRule(index);//index 角标

IE：sheet.removeRule(index);

4. 获取边框大小

W3C：内边框

width: document.documentElement.innerWidth ;

height: document.documentElement.innerHeight ;

IE 、W3C：

width: document.documentElement.clientWidth;  

  height: document.documentElement.clientHeight ;

5. 现代事件绑定

var element  = document.getElementById("user");//得到一个元素

var fun = function (){ alert("event"); };

W3C：element.addEventListener("click",fun);          //绑定

     element.removeEventListener("click",fun); //删除事件

IE：element.attachEvent("onclick",fun);  //IE事件名称加 “on"

element.detachEvent("onclick",fun);//删除事件

并不建议使用attachEvent和detachEvent，会出现一些问题，在绑定的方法中this代表window，而不是元素对象；绑定多个事件时，相同的事件可以重复绑定，并且绑定顺序混乱。

使用下面的代码替换IE的事件绑定方法，避免以上问题：

/** 事件绑定 obj:元素对象 type：事件类型fn：事件函数*/function addEvent(obj,type,fn){if(typeof window.addEventListener != 'undefind'){obj.addEventListener(type,fn,false);}else{if(!obj.events) obj.events = {};//用来存储事件if(!obj.events[type]){obj.events[type] = [];if(obj['on'+type]) obj.events[type][0] = fn;}//相同的函数不继续绑定if(!addEvent.eques(obj.events[type],fn)){obj.events[type][addEvent.ID++] = fn;}//给对象元素的事件指定方法，调用数组中的所有绑定的函数obj['on'+type] =addEvent.exec;}}addEvent.ID = 0;//执行函数addEvent.exec = function(event){var e = event || window.event;var es = this.events[e.type];for(var i in es){es[i].call(this,e);//回调，用当前元素对象this调用（对象伪装）}};//判断绑定函数是否已经存在addEvent.eques = function(es,fn){for(var i=0;i<es.length;i++){if(es[i] == fn){return true;}}return false;};/** *  删除事件绑定 */function removeEvent(obj,type,fn){if(typeof window.removeEventListener != 'undefind'){obj.removeEventListener(type,fn);}else{var es = obj.events[type];for(var i in es){if(es[i] == fn){delete es[i];}}}}

6. CSS设置元素透明度

W3C：opacity:0.5

IE：filter: alpha(opacity=50)

7. 去除首尾空字符串

现代浏览器： “    abc   defg  ”.trim();

 IE & 现代浏览器 :  使用正则 “  abc   defg ”.replace(/^\s+|\s+$/g,"");