谈谈

JS

中常遇到的浏览器兼容问题和解决⽅法

今天整理了⼀下浏览器对

JS

的兼容问题，希望能给你们带来帮助，我没想到的地⽅请留⾔给我，我再加上；

常遇到的关于浏览器的宽⾼问题：

//

以下均可

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

⽀持

    };

  }