原生js的各种兼容问题集

最新推荐文章于 2021-06-26 09:53:34 发布

大白兔奶糖a

最新推荐文章于 2021-06-26 09:53:34 发布

阅读量195

点赞数

文章标签：兼容原生js兼容问题

本文链接：https://blog.csdn.net/weixin_45478034/article/details/102779825

版权

1.关于获取非行内样式
IE:DOM元素.currentStyle .属性
高级浏览器：window.getComputedStyle （DOM元素）.属性
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];
        }
    }

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: 传参e–> e.clientX;e.clientY
获取event对象兼容性写法: var e=e||event;
document.oncilck=function(ev){
var e=e || window.event;
console.log(e);
}

6.关于为一个元素绑定两个相同事件：attachEvent和addEventListener 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if…else…)
IE8以下用: attachEvent(‘事件名’,事件处理函数);不能够绑定到捕获阶段
FF,Chrome,IE9-10用: addEventListener (‘事件名’,事件处理函数,false);false为绑定到冒泡阶段。
移出方式：
IE：dom.detachEvent(“事件名”，事件处理函数)
高级浏览器：dom.removeEventlistener(“事件名”，事件处理函数)
移出时候一定注意移除的事件处理函数是一开始绑定的事件处理函数，否则会因为地址不一样而移除不掉，匿名函数是移除不了的。

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

8、键盘事件 keyCode 兼容性
在火狐中，keyCode是获取不到的，他的低版本使用e.width来获取键盘编码

9、求窗口大小的兼容写法
详见另一篇博文详细整理 https://blog.csdn.net/weixin_45478034/article/details/101959325

10、阻止冒泡与阻止默认行为
// 阻止默认行为
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
注：如果是DOM0级绑定方式，则可以用return false进行默认行为的阻止。

// 阻止事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};