js兼容问题_jsweb兼容-CSDN博客

 
  一:常遇到的关于浏览器的宽高问题： 
 
  //以下均可console.log()实验 
 
  var 
  winW=document.body.clientWidth||document.docuemntElement.clientWidth; 
  //网页可见区域宽 
 
  var 
  winH=document.body.clientHeight||document.docuemntElement.clientHeight; 
  //网页可见区域宽 
 
  //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框 
 
  var 
  winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth; 
  //整个网页的宽 
 
  var 
  winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight; 
  //整个网页的高 
 
  var 
  scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop; 
  //网页被卷去的高 
 
  var 
  scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft; 
  //网页左卷的距离 
 
  var 
  screenH=window.screen.height; 
  //屏幕分辨率的高 
 
  var 
  screenW=window.screen.width; 
  //屏幕分辨率的宽 
 
  var 
  screenX=window.screenLeft; 
  //浏览器窗口相对于屏幕的x坐标（除了FireFox） 
 
  var 
  screenXX=window.screenX; 
  //FireFox相对于屏幕的X坐标 
 
  var 
  screenY=window.screenTop; 
  //浏览器窗口相对于屏幕的y坐标（除了FireFox） 
 
  var 
  screenYY=window.screenY; 
  //FireFox相对于屏幕的y坐标

二 :event事件问题：

 
  //event事件问题 
 
  document.onclick= 
  function 
  (ev){ 
  //谷歌火狐的写法，IE9以上支持，往下不支持； 
 
  var 
  e=ev; 
 
  console.log(e); 
 
  } 
 
  document.onclick= 
  function 
  (){ 
  //谷歌和IE支持，火狐不支持； 
 
  var 
  e=event; 
 
  console.log(e); 
 
  } 
 
  document.onclick= 
  function 
  (ev){ 
  //兼容写法； 
 
  var 
  e=ev||window.event; 
 
  var 
  mouseX=e.clientX; 
  //鼠标X轴的坐标 
 
  var 
  mouseY=e.clientY; 
  //鼠标Y轴的坐标 
 
  } 
 
  三 : DOM节点相关的问题，我直接封装了函数，以便随时可以拿来使用： 
 
    //DOM节点相关，主要兼容IE 6 7 8 
   
    function 
    nextnode(obj){ 
    //获取下一个兄弟节点 
   
    if 
    (obj.nextElementSibling) { 
   
    return 
    obj.nextElementSibling; 
   
    } 
    else 
    { 
   
    return 
    obj.nextSibling; 
   
    }; 
   
    } 
   
    function 
    prenode(obj){ 
    //获取上一个兄弟节点 
   
    if 
    (obj.previousElementSibling) { 
   
    return 
    obj.previousElementSibling; 
   
    } 
    else 
    { 
   
    return 
    obj.previousSibling; 
   
    }; 
   
    } 
   
    function 
    firstnode(obj){ 
    //获取第一个子节点 
   
    if 
    (obj.firstElementChild) { 
   
    return 
    obj.firstElementChild; 
    //非IE678支持 
   
    } 
    else 
    { 
   
    return 
    obj.firstChild; 
    //IE678支持 
   
    }; 
   
    } 
   
    function 
    lastnode(obj){ 
    //获取最后一个子节点 
   
    if 
    (obj.lastElementChild) { 
   
    return 
    obj.lastElementChild; 
    //非IE678支持 
   
    } 
    else 
    { 
   
    return 
    obj.lastChild; 
    //IE678支持 
   
    }; 
   
    } 
   
  四 : document.getElementsByClassName问题： 
 
    //通过类名获取元素 
   
    document.getElementsByClassName( 
    '' 
    ); 
    //IE 6 7 8不支持； 
   
    //这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery... 
   
    //第一个为全局获取类名，第二个为局部获取类名 
   
    function 
    byClass1(oClass){ 
    //全局获取，oClass为你想要查找的类名，没有“.” 
   
    var 
    tags=document.all?document.all:document.getElementsByTagName( 
    '*' 
    ); 
   
    var 
    arr=[]; 
   
    for 
    ( 
    var 
    i = 0; i < tags.length; i++) { 
   
    var 
    reg= 
    new 
    RegExp( 
    '\\b' 
    +oClass+ 
    '\\b' 
    , 
    'g' 
    ); 
   
    if 
    (reg.test(tags[i].className)) { 
   
    arr.push(tags[i]); 
   
    }; 
   
    }; 
   
    return 
    arr; 
    //注意返回的也是数组，包含你传入的class所有元素； 
   
    } 
   
    function 
    byClass2(parentID,oClass){ 
    //局部获取类名，parentID为你传入的父级ID 
   
    var 
    parent=document.getElementById(parentID); 
   
    var 
    tags=parent.all?parent.all:parent.getElementsByTagName( 
    '*' 
    ); 
   
    var 
    arr=[]; 
   
    for 
    ( 
    var 
    i = 0; i < tags.length; i++) { 
   
    var 
    reg= 
    new 
    RegExp( 
    '\\b' 
    +oClass+ 
    '\\b' 
    , 
    'g' 
    ); 
   
    if 
    (reg.test(tags[i].className)) { 
   
    arr.push(tags[i]); 
   
    }; 
   
    }; 
   
    return 
    arr; 
    //注意返回的也是数组，包含你传入的class所有元素； 
   
    }

五 :