如何處理使用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>
如何處理使用js兼容所有瀏覽器的問題