• 原生js方面的兼容性问题

    1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
      我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
      我们一般通过这两个方法获取行外样式：
      IE下: currentStyle
      Chrome,FF下: getComputedStyle(oDiv,false)
            兼容两个浏览器的写法:
            if(oDiv.currentStyle){
                alert(oDiv.currentStyle.width);
            }else{
                alert(getComputedStyle(oDiv,false).width);
            }
        *注:在解决很多兼容性写法时,都是用if..else..

        封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)
            funtion getStyle(obj,name){
                if(obj.currentStyle){
                    //IE
                    return obj.currentStyle[name];
                }else{
                    //Chrom,FF
                    return getComputedStyle(obj,false)[name];
                }
            }
        调用：getStyle(oDiv,'width');



    2.关于用“索引”获取字符串每一项出现的兼容性问题:
      对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值,
        var str="abcde";
        aletr(str[1]);
        但是低版本的浏览器IE6,7不兼容
        兼容方法:str.charAt(i)    //全部浏览器都兼容
        var str="abcde";
        for(var i=0;i<str.length;i++){
          alert(str.charAt(i));   //放回字符串中的每一项
        }


    3.关于DOM中 childNodes 获取子节点出现的兼容性问题
      childNodes:获取子节点,
        --IE6-8:获取的是元素节点,正常
        --高版本浏览器:但是会包含文本节点和元素节点(不正常)
      解决方法: 使用nodeType:节点的类型，并作出判断
          --nodeType=3-->文本节点
          --nodeTyPE=1-->元素节点
      例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
      获取元素子节点兼容的方法:
      var oUl=document.getElementById('ul');
      for(var i=0;i<oUl.childNodes.length;i++){
        if(oUl.childNodes[i].nodeType==1){
          oUl.childNodes[i].style.background='red';
        }
      }
      注：上面childNodes为我们带来的困扰完全可以有children属性来代替。
          children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，
          比上面的好用所以我们一般获取子节点时,最好用children属性。
          var oUl=document.getElementById('ul');
          oUl.children.style.background="red";



    4.关于使用 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';
        }


    5.关于使用 event对象，出现的兼容性问题
        如: 获取鼠标位置
                IE/Chrom: event.clientX;event.clientY
                FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY
        获取event对象兼容性写法: var oEvent==ev||event;
            document.oncilck=function(ev){
                var oEvent==ev||event;
                if(oEvent){
                    alert(oEvent.clientX);
                }
            }


    6.关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题
        事件绑定:(不兼容需要两个结合做兼容if..else..)
        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);
        });


    7.关于获取滚动条距离而出现的问题
      当我们获取滚动条滚动距离时:
            IE,Chrome: document.body.scrollTop
            FF: document.documentElement.scrollTop
    兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

    8、键盘事件 keyCode 兼容性写法
     
    var inp = document.getElementById('inp')
    var result = document.getElementById('result')
     
    function getKeyCode(e) {
     e = e ? e : (window.event ? window.event : "")
     return e.keyCode ? e.keyCode : e.which
    }
     
    inp.onkeypress = function(e) {
     result.innerHTML = getKeyCode(e)
    }
    9、求窗口大小的兼容写法
     
    当我们获取滚动条滚动距离时:
    IE,Chrome: document.body.scrollTop
    FF: document.documentElement.scrollTop
     
    // 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
    // 1600 * 525
    var client_w = document.documentElement.clientWidth || document.body.clientWidth;
    var client_h = document.documentElement.clientHeight || document.body.clientHeight;
     
    // 网页内容实际宽高（包括工具栏和滚动条等边线）
    // 1600 * 8
    var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
    var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
     
    // 网页内容实际宽高 (不包括工具栏和滚动条等边线）
    // 1600 * 8
    var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
    var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
     
    // 滚动的高度
    var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
    10.DOM 事件处理程序的兼容写法（能力检测）
     
    var eventshiv = {
      // event兼容
      getEvent: function(event) {
        return event ? event : window.event;
      },
     
      // type兼容
      getType: function(event) {
        return event.type;
      },
     
      // target兼容
      getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
      },
     
      // 添加事件句柄
      addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
          elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
          elem.attachEvent('on' + type, listener);
        } else {
          // 在这里由于.与'on'字符串不能链接，只能用 []
          elem['on' + type] = listener;
        }
      },
     
      // 移除事件句柄
      removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
          elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
          elem.detachEvent('on' + type, listener);
        } else {
          elem['on' + type] = null;
        }
      },
     
      // 添加事件代理
      addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
          if (e.target.matches(agent)) {
            listener.call(e.target, e); // this 指向 e.target
          }
        });
      },
     
      // 取消默认行为
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },
     
      // 阻止事件冒泡
      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };
    11.解决 IE9 以下浏览器不能使用 opacity
    opacity: 0.5;
    filter: alpha(opacity = 50);
    filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
    12.为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题
     
    事件绑定:(不兼容需要两个结合做兼容if..else..)
    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);
      }
     }
    13.获取元素的非行间样式值
    function getStyle(object,oCss) {
        if (object.currentStyle) {
         return object.currentStyle[oCss];//IE
        }else{
         return getComputedStyle(object,null)[oCss];//除了IE
        }
      }
    14.节点加载
     
    //火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同
    //感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。
    document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.
  • 相关阅读:
    Jmeter+maven+Jenkins构建云性能测试平台（mark 推荐）
    Jenkins配置自动化构建
    跟我学Shiro---无状态 Web 应用集成
    Tomcat下部署多个项目
    Guava 教程1-使用 Google Collections,Guava,static imports 编写漂亮代码
    Spring-security-Oauth2.0
    OAuth2
    从产品角度看，怎样的知识付费才是用户要的？
    REST API 基于ACCESS TOKEN 的权限解决方案
    一个想法照进现实-《IT连》创业项目：关于团队组建
  • 原文地址：https://www.cnblogs.com/yebai/p/11238558.html
Copyright © 2020-2023  润新知