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 oEvent==ev||event;
???????document.oncilck=function(ev){
???????????var oEvent==ev||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
JS中出现的兼容性问题的总结
原文地址：https://www.cnblogs.com/yxs1530/p/10321270.html