chrome js获取当前机器名_js常见兼容性问题

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

谢谢你们的关注，让我有了动力，以后我会坚持更新文章，希望对你们有帮助哦~大家多提一提建议，有不对的地方欢迎指出，好的建议我一定采纳，另外，大家想看什么关于前端的文章，知识，欢迎留言，我会更新的。

谢谢你们！！！