做兼容注意:

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

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

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

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

  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);

}

}

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

JS中基本的一些兼容问题 可能解释的不会太清楚的更多相关文章

  1. [js]js中4种无节操的预解释情况

    js中4种无节操的预解释情况 - 1. if语句即使条件不成立,条件里的表达式也会进行预解释. - 2. 匿名函数的预解释: 只对等号左边与解释 - 3. 自执行函数的预解释: 不进行预就解释, 执行 ...

  2. JS中一些常用的兼容写法

    1.滚动条到顶端的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;2.滚动条到左端的距离 ...

  3. cssText在js中写样式表兼容全部

    oDiv.style.cssText="width:100px;height:200px;";是前面的升级版(oDiv.style.width='200px';) <styl ...

  4. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  5. 分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容

    问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...

  6. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  7. springMVC框架在js中使用window.location.href请求url时IE不兼容问题解决

    是使用springMVC框架时,有时候需要在js中使用window.location.href来请求url,比如下面的路径: window.location.href = 'forecast/down ...

  8. js中css样式兼容各个浏览器写法

    在实际业务中往往需要在js中对dom添加一些样式,还需要对各个浏览器厂商的兼顾,看到一位大神写的一个方法很赞,做一个笔记 function prefixStyle(style){ var eleSty ...

  9. js中startWith、endWith 函数不能在任何浏览器兼容的问题

    在做js测试的时候用到了startsWith函数,但是他并不是每个浏览器都有的,所以我们一般要重写一下这个函数,具体的用法可以稍微总结一下 在有些浏览器中他是undefined 所以我们可以这样的处理 ...

随机推荐

  1. spring框架整合hibernate框架简单操作数据库

    1.配置文件: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http:/ ...

  2. linux(九)之网络基础

    一.ping命令 1.1.作用 用于检测主机.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而得知该主机运作正常. 1.2.命令说明 pi ...

  3. 产品经理和Scrum Master都必须是领域专家吗?

    注明:原文来自 Mike Cohn的邮件推送,我已将原文贴在最后供参考,翻译的目的是为了锻炼自己的能力和理解水平,如有版权侵犯,请告之. Scrum Master 和 产品经理应该是领域专家吗?让我们 ...

  4. HTML <td> 标签的 colspan 属性

    HTML <td> 标签的 colspan 属性 实例 表格单元横跨两列的表格: 浏览器支持 所以浏览器都支持 colspan 属性. 没有浏览器支持 colspan="0&qu ...

  5. MySQL使用聚合函数查询

    create table `t_grade` ( `id` int , `stuName` varchar (60), `course` varchar (60), `score` int ); in ...

  6. Day-1: Python准备知识

    python简介 不同于c语言这种贴近硬件的言语,Python是用来编写应用程序的高级编程语言.Python是一款开源软件,所以它有非常完善的代码库,宝库内置的基本库和众多开发者提供的第三方库.这就允 ...

  7. 一只菜鸟的瞎J8封装系列的目录

    因为这是一个系列...也就是我们所说的依赖关系.后面很多方法都是基于我前面封装的工具来进行的,所以我列一个目录供大家参考... 一只菜鸟的瞎J8封装系列  一.手把手封装数据层之DButil数据库连接 ...

  8. 点击grid单元格弹出新窗口

    实现功能:点击指定单元格后会弹出新窗口,并且最后一行合计不会触发单元格触发函数 <script type="text/javascript"> grid.on('cel ...

  9. POI 自用API

    poi包下载 API 使用POI生成Excel,大家都是赞个.可是狐狸觉得毕竟不是微软的产品,使用没有C#语言的好用,方法还是存在极限的. 下面总结狐狸自己用过的方法: import org.apac ...

  10. ==与equal

    @ 对象类型比较:(引用类型) ==和equal都表示对象引用的内存地址是否相同 对象类型继承Object并重写方法equal()用于对象的比较 @ 字符串比较: ==表示String引用的内存地址是 ...