JS中出现的兼容性问题的总结 （持续更新）

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
我们一般通过这两个方法获取行外样式：
IE下: currentStyle
Chrome、FF下: getComputedStyle(oDiv, false)

// 兼容两个浏览器的写法:
if (oDiv.currentStyle) {
    console.log(oDiv.currentStyle.width);
} else {
    console.log(getComputedStyle(oDiv, false).width);
}

注:在解决很多兼容性写法时，都是用if..else..

封装一个获取行外样式的函数:(兼容所有浏览器，包括低版本IE6、7)

funtion getStyle(obj, name) {
    if (obj.currentStyle) {
        // IE
        return obj.currentStyle[name];
    } else {
        // Chrome、FF
        return getComputedStyle(obj, false)[name];
    }
}

　
调用：

getStyle(oDiv, "width");

　
2.关于用“索引”获取字符串每一项出现的兼容性问题:
对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值

var str = "abcde";
console.log(str[1]);

但是低版本的浏览器IE6，7不兼容
兼容方法:

str.charAt(i)    //全部浏览器都兼容

　
​案例：

var str="abcde";
for (var i = 0; i < str.length; i++) {
    console.log(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、Chrome: event.clientX;event.clientY
FF、IE9以上、Chrome: 传参ev--> ev.clientX;ev.clientY
获取event对象兼容性写法:

var oEvent == ev || event;

案例：

document.oncilck = function(ev) {
    var oEvent == ev || event;
    if (oEvent) {
        console.log(oEvent.clientX);
    }
}

　
6.关于为一个元素绑定两个相同事件：attachEvent/addEventListener 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if..else..)
IE8以下用: attachEvent('事件名', fn);
FF、 Chrome、 IE9以后用: addEventListener('事件名', fn, false);
多事件绑定封装成一个兼容函数:

function myAddEvent(obj, ev, fn) {
    if (obj.attachEvent) {
        // IE8以下
        obj.attachEvent('on'+ev, fn);
    } else if (obj.addEventListener) {
        // FF、Chrome、IE9以后
        obj.addEventListener(ev, fn, false);
    } else {
        // 其他
        obj['on'+ev] = fn;
    }
}

// 调用
myAddEvent(oBtn, 'click', function() {
    console.log(a);
});
myAddEvent(oBtn, 'click', function() {
    console.log(b);
});

　
7.关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
IE、Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容处理:

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop