如何处理使用js兼容所有浏览器的问题

首先：如何处理兼容问题

1.如果两个都是属性，用逻辑||做兼容

2.如果有一个是方法，用三元做兼容

3.如果是多个属性或方法，封装函数做兼容

分享两个小知识点：

1、取消拖拽的默认行为：

document.ondragstart = function(){

　　return false

}

2、阻止右键菜单的默认行为：

document.oncontextmenu = function(){

　　return false

}

开始兼容问题：

一、运用逻辑运算符||做的相关兼容

1、关于获取滚动高度的不兼容问题

var scrollTop=documentElement.scrollTop

var scrollTop=document.body.scrollTop(chrome写法)

兼容写法：

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

2、关于获取事件对象的兼容：

function (eve){

　　var e = eve || window.event

}

3、获取键盘编码的兼容：

function (eve){

　　var e = eve || window.event

　　var keyValue = e.keyCode || e.charCode || e.which

}

4、关于事件委托获取事件源的兼容问题：

function (eve){

　　var e = eve || window.event

　　var target = e.target || e.srcElement

}

二、运用三元表达式做的兼容

1、阻止事件冒泡的兼容

function (eve){

　　var e = eve || window.event

　　e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;

}

2、阻止超链接的默认行为：

oA.onclick = function (eve){

　　var e = eve || window.event

　　e.preventDefault ? e.preventDefault() : e.returnValue = false

}

三、运用方法进行兼容的问题：

1、添加事件监听：

function addEventListener(obj,event,fn,boo){

if(obj.addEventListener){

obj.addEventListener(event,fn,boo);

}else{

　　　　obj.attachEvent("on" + event,fn);

　　}

}

运用：

addEventListener(oBtn,"click",fn1,false);

addEventListener(oBtn,"click",fn2,false);

addEventListener(oBtn,"click",fn3,false);

2、移除事件监听：

function removeEventListener(obj,evt,fn,boo){

if(obj.removeEventListener){

　　　　obj.removeEventListener(evt,fn,boo);

}else{

　　　　obj.detachEvent("on" + evt,fn);

　　}

}

removeEventListener(oBtn,"click",fn2,false);

3、获取鼠标键值的兼容：（event.button）

function getbutton（eve）{

　　var e = eve || window.event;

　　if(eve){//判断是否为标准浏览器

　　return e.button

}else if(window.event){//判断是不是IE

switch(e.button){

case 1 :  return 0;

case 4 :  return 1;

case 2 :  return 2;

}}}

二:关于使用getAttribute获取className不兼容的问题

<div id="box1"></div>

var oBox=document.getElementById("box1")

(1)console.log(oBox.getAttribute("className"))//标准浏览器不支持,ie7支持

（2)console.log(oBox.getAttribute("class")//标准浏览器支持，ie7不支持

兼容写法：

function fn(obj){

if(obj.getAttribute("class"))==null{

return obj.getAttribute("className");

}else{

　return obj.getAttribute("class")

}

};

三：关于getElementsByClassName("class属性名称")的不兼容问题；

console.log(obj.getElementsByClassName("class属性名称"))//标准浏览器支持，ie8以下不支持

兼容写法：

function fn(obj.class属性名称){

if(obj.getElementsByClassName){

return   obj.getElementsByClassName(className);

}else{

var list = [];

var arr = obj.getElementsByTagName(*)//上一步是获取页面所有的标签元素

for(var i = 0;i < arr.length;i ++){

if(arr[i].className == className){

list.push(arr[i]);

}

}

return list;}}

遍历所有元素，找出class名为指定名字的元素

四: 关于处理空白文本节点的问题

1.忽略空白文本节点

function fn(nodes){

var arr = [];

for(var i = 0;i < nodes.length;i ++){

if(nodes[i].nodeType === 3 &&

/^\s+$/.test(nodes[i].nodeValue)){

continue;

}else{

arr.push(nodes[i]);

}}    return arr;}

2.删除空白文本节点：

function fn(nodes){//nodes;所有的子节点

for(var i = 0;i < nodes.length;i ++){

if(nodes[i].nodeType === 3 &&

/^\s+$/.test(nodes[i].nodeValue)){

nodes[i].parentNode.removeChild(nodes[i]);}}

return nodes

}

3.移除空白节点

function fn(node){//node:父节点

var childs = node.childnodes;//获取所有子节点

for(var i = 0;i < childs.length;i ++){

if(childs[i].nodeType === 3 &&

/^\s+$/.test(childs[i].nodeValue)){

node.removeChild(childs[i]);}}

return node;

}

五:获取非行内样式的兼容写法

function getStyle(obj,attr){

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];

}

attr：是属性；比如

<style>#box{width:100px;}</style>

<div id = box></div>

<script>

var oBox = document.getElementById("box");

function getStyle(obj,attr){

return obj.currentStyle ?       obj.currentStyle[attr] :      getComputedStyle(obj,true[attr];

};

var s = getStyle(oBox,"width");

alert(s);

</script>