原生JS中存在的一些兼容问题和解决办法

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式： IE下: currentStyle Chrome,FF下: 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++){ 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 oEventev||event; document.oncilck=function(ev){ var oEventev||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

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

var inp = document.getElementById(‘inp’) var result = document.getElementById(‘result’)

function getKeyCode(e) { e = e ? e : (window.event ? window.event : “”) return e.keyCode ? e.keyCode : e.which }

inp.onkeypress = function(e) { result.innerHTML = getKeyCode(e) }

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

当我们获取滚动条滚动距离时: 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都可以.