Talk about the browser compatibility problem and the solution _javascript skill that often encounters in JS

Today, I sorted out the browser to the compatibility of JS, I hope to bring you help, I did not think of the place please leave a message to me, I add;

Frequently encountered questions about the wide height of browsers:

/below can be Console.log () experiment var winw=document.body.clientwidth| | document.docuemntelement.clientwidth;//page Visible area wide var winh=document.body.clientheight| | document.docuemntelement.clientheight;//the visible area of the page is wider than the width of the border, if it is offsetwidth or offsetheight, include the border var winww= document.body.scrollwidth| | document.docuemntelement.scrollwidth;//wide var winhh=document.body.scrollheight| for the entire page | document.docuemntelement.scrollheight;//full page of high var scrollheight=document.body.scrolltop| | document.docuemntelement.scrolltop;//pages are rolled up high var scrollleft=document.body.scrollleft| | document.docuemntelement.scrollleft;//Page left volume distance var screenh=window.screen.height;//screen resolution high Var screenw= window.screen.width;//screen resolution of the wide var screenx=window.screenleft;//browser window relative to the screen's x-coordinate (except Firefox) var screenxx= Window.screenx;//firefox relative to the screen's x-coordinate var screeny=window.screentop;//browser window relative to the screen's y-coordinate (except Firefox) var screenyy= Window.screeny;//firefox the y-coordinate relative to the screen 

Event Incident Issue:

Event incident Issue
  document.onclick=function (EV) {//Google Firefox writing, IE9 above support, down not support;
    var E=ev;
    Console.log (e);
  }
  Document.onclick=function () {//Google and IE support, Firefox does not support;
    var e=event;
    Console.log (e);
  }
  Document.onclick=function (EV) {//compatible notation;
    var e=ev| | window.event;
    var mousex=e.clientx;//mouse x-axis coordinate
    var mousey=e.clienty;//mouse y-axis coordinates
  }

DOM node-related issues, I encapsulate the functions directly so that you can use them anytime:

DOM node-related, mainly compatible IE 6 7 8
  function NextNode (obj) {//Get the next sibling node
    if (obj.nextelementsibling) {return
      obj.nextelementsibling;
    } else{return
      obj.nextsibling;
    }
  function Prenode (obj) {//Get previous sibling node
    if (obj.previouselementsibling) {return
      obj.previouselementsibling
    } else{return
      obj.previoussibling;
    }
  function Firstnode (obj) {//Get first child node
    if (obj.firstelementchild) {return
      obj.firstelementchild;//non-IE678 support
    } else{return
      obj.firstchild;//ie678 support
    };
  function Lastnode (obj) {//Get last child node
    if (obj.lastelementchild) {return
      obj.lastelementchild;//non-IE678 support
    } else{return
      obj.lastchild;//ie678 support
    };
  

Document.getelementsbyclassname question:

//Get element Document.getelementsbyclassname (") by class name,//ie 6 7 8 not supported;//You can define a function to solve the compatibility problem, of course.
    Give me jquery here ...//first for Global Get class name, second for local get class name function ByClass1 (oclass) {//global fetch, Oclass for the class name you want to find, no "."
    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;//Note that the returned array contains all the elements of the class you passed in,} function ByClass2 (parentid,oclass) {//local fetch class name, ParentID for you incoming parent ID var paren
    T=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;//Note that the returned array contains all the elements of the class you passed in; 

Gets the non-row style values for the element:

Gets the non-row style value
   function GetStyle (object,ocss) {
       if (object.currentstyle) {return
         object.currentstyle[of the element Ocss];//ie
       }else{return
         getComputedStyle (object,null) [ocss];//except IE
       }
   }

To set up a listener event:

Set Listener event
   function addevent (OBJ,TYPE,FN) {//Add event listener, three parameters are object, event type, event handler, default is False
    if ( Obj.addeventlistener) {
      obj.addeventlistener (type,fn,false);//Non IE
    } else{
      obj.attachevent (' on ' + TYPE,FN);//ie, here has been added on, when the reference to the note do not repeatedly add
    };
  }
  function Removeevent (OBJ,TYPE,FN) {//delete event listener
    if (obj.removeeventlistener) {
      Obj.removeeventlistener type, FN,FALSE)//Non IE
    } else{
      obj.detachevent (' on ' +type,fn);//ie, this is already added on, and when you pass the argument, be careful not to repeat
    };
  }

The distance from the element to the edge of the browser:

Here, add an element to the edge of the browser, very useful
  function Offsettl (obj) {//Get element content distance from the browser border (including border)
    var ofl=0,oft=0;
    while (obj) {
      ofl+=obj.offsetleft+obj.clientleft;
      Oft+=obj.offsettop+obj.clienttop;
      obj=obj.offsetparent;
    }
    Return{left:ofl,top:oft};
  }

To prevent event propagation:

JS Block event propagation, here use the Click event as an example
  document.onclick=function (e) {
    var e=e| | window.event;
    if (e.stoppropagation) {
      e.stoppropagation ();//W3C standard
    }else{
      e.cancelbubble=true;//ie ...
    }
  }

To block default events:

JS block default Event
  Document.onclick=function (e) {
    var e=e| | window.event;
    if (e.preventdefault) {
      e.preventdefault ();//W3C standard
    }else{
      e.returnvalue= ' false ';//ie.
    }
  }

About target in event events:

About Target
  document.onmouseover=function (e) {var e=e| in event Events
    | window.event;
    var target=e.target| | e.srcelement;//gets the compatible notation for target, followed by IE
    var from=e.relatedtarget| | e.formelement;//Mouse to the place, the same back for IE ...
    var to=e.relatedtarget| | e.toelement;//the mouse to the place
  }

Mouse Wheel Scrolling event:

Mouse wheel Event
  //Firefox wheel event
  Document.addeventlistener ("Dommousescroll", function (event) {
    alert ( Event.detail)//If roll forward is-3, Roll back 3
  },false)
  //non-Firefox wheel event
  Document.onmousewheel=function
    alert (event.detail)//Roll forward: 120, Roll back: -120
  }

Node Load:

Firefox special node loading events, that is, the node is loaded to perform, and the onload different
//feel the use of not much, directly to the JS code in the page structure behind the same can be achieved.
document.addeventlistener (' domcontentloaded ', function () {},false);//dom loading completed. It seems to be all except ie6-8.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.