JS中基本的一些兼容问题 可能解释的不会太清楚

做兼容注意：

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

二如果有一个是方法 用三目运算符做兼容

三多个属性或方法封装函数做兼容

一：谷歌浏览器和火狐浏览器鼠标滚动条兼容

1. 1.document.documentElement.scrollTop || document.body.scrollTop
2. document.documentElement.scrollLeft || document.body.scrollLeft

二:IE低版本和标准浏览器获取className的兼容

function getgetAttribute(obj){

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

return obj.getAttribute("className");

}else{

return obj.getAttribute("class");

}

}

三 过滤空白文本

 

三种方式忽略空白文本节点
function noSpace(node){
var arr = [];
//遍历所有的子节点
for(var i = 0; i < node.length; i++){
//判断节点类型是文本且文本中包含空白
       if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
                continue;
          }else{
             arr.push(node[i]); //将非空白节点添加到新的数组中
       }
}
    return arr;
}

1. 删除空白文本节点
   function removeSpace(node){
   for(var i = 0; i < node.length; i++){
   //判断节点类型是文本且文本中包含空白
          if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
                 //移除文本节点中的空白
                   node[i].parentNode.removeChild(node[i]);
             }
          }
          return node;
   }

常用 重要//3.移除空白文本节点

function removeSpace(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){
        if(obj.currentStyle){
             return obj.currentStyle[attr];
        }else{
             return getComputedStyle(obj,false)[attr];
        }
   }

三目也可以

function getStyle(obj,attr){

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

}

五 function(){

var e= evt||window.event;

}

 

 

六function getButton(evt){

var e = evt || window.event; //获取事件对象

if(evt){ //通过获取事件对象的方式，判断是否为标准浏览器

return e.button; //直接键值

}else if(window.event){ //通过获取事件对象的方式，判断是否为IE

//键值向标准靠拢（返回标准键值）

switch(e.button){

case 1 : return 0;

case 4 : return 1;

case 2 : return 2;

}

}

}

七 document.onkeypress =function(evt){

Var e=evt || window.event;

Var keyValue = e.keyCode || e.charCode || e.which;

Alert(keyValue);

}

八 阻止事件冒泡兼容

e.stopPropagation ?e.stopPropagation():e.cancelBubble=true;

九  阻止a标签默认链接

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

十添加事件监听的兼容

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

if(obj.addEventListener){

obj.addEventListener(event,fn,boo);

}else{

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

}

}

十一移出事件监听的兼容

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

if(obj.removeEventListener){

obj.removeEventListener(evt,fn,boo);

}else{

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

}

}

后续还会有 暂时总结一点 当然兼容写法多样 也可以用三种方式里的其他写

转载于:https://www.cnblogs.com/GMDDL/p/7571801.html