1.关于获取行外样式currentStyle和getComputedStyle出现的兼容问题
我们都知道js通过style不可以获取行外样式,如果我们需要获取行外样式就会使用这两种
ie下:currentStyle
chrome,FF下:getComputedStyle 第二个参数的作用是获取伪类元素的属性值
//封装一个获取行外样式的函数(兼容所有浏览器,包括低版本ie6,7)
function getStyle(element,attr){
if(element.currentStyle){
//ie
return element.currentStyle[attr];
}else{
//chrome FF
return getComputedStyle(element,null)[attr];
}
}
console.log(getStyle(box,'height'));
2.关于“索引”获取字符串每一项出现的兼容性的问题:
对于字符串也有类似于数组这样通过下标索引获取每一项的值
var str = 'abcd';
console.log(str[2]);
但是低版本的浏览器ie6,7不兼容
兼容方法:str.chatAt() (全部浏览器都兼容)
var str = 'abcde';
for(var i = 0;i < str.length;i++){
console.log(str.charAt(i));
}
3.关于使用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';
}
4.关于使用event对象,出现兼容性问题
获取event对象兼容性写法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
5.关于为一个元素绑定两个相同事件:attachEvent/attachEventLister 出现的兼容问题
事件绑定:
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);
});
6.关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容处理:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
谢谢你们的关注,让我有了动力,以后我会坚持更新文章,希望对你们有帮助哦~大家多提一提建议,有不对的地方欢迎指出,好的建议我一定采纳,另外,大家想看什么关于前端的文章,知识,欢迎留言,我会更新的。
谢谢你们!!!