Common JavaScript compatibility problems and related solutions (chrome/IE/firefox) _ javascript skills

This article provides a detailed description of common JavaScript compatibility problems and related solutions (chromeIEfirefox). If you need it, refer to it, I hope to help you. First, I would like to declare that the version of my browser is chrome15.0.874.121 Firefox 8.01 IE9 IETester.

The following Code declares

1: Obtain the scroll bar

The Code is as follows:

Function getScroll (){
Var t, l, w, h;

If (document.doc umentElement & document.doc umentElement. scrollTop ){
T = document.doc umentElement. scrollTop; // The top of the scroll bar
L = document.doc umentElement. scrollLeft; // left end of the scroll bar
W = document.doc umentElement. scrollWidth; // The width of the scroll bar, that is, the page width.
H = document.doc umentElement. scrollHeight; // The height of the scroll bar.
}
Else
If (document. body ){
T = document. body. scrollTop;
L = document. body. scrollLeft;
W = document. body. scrollWidth;
H = document. body. scrollHeight;
}
Return {
T: t,
L: l,
W: w,
H: h
};
}

2: Obtain the width and height of the browser.

The Code is as follows:

Function getPageWidth (){
Var pageWidth = window. innerWidth;
If (typeof pageWindth! = "Number "){
If (document. compatMode = "CSS1Compat "){
PageWidth = document.doc umentElement. clientWidth;
}
Else {
PageWidth = document. body. clientWidth;
}
}
Return pageWidth;
}

Function getPageHeight (){
Var pageHeight = window. innerHeight;
If (typeof pageWindth! = "Number "){
If (document. compatMode = "CSS1Compat "){
PageHeight = document.doc umentElement. clientHeight;
}
Else {
PageHeight = document. body. clientHeight;
}
}
Return pageHeight;
}

3: get the name of the current browser Model

The Code is as follows:

Function (){
Var Sys = {};
Var ua = navigator. userAgent. toLowerCase ();
Var s;
(S = ua. match (/msie ([\ d.] + )/))? Sys. ie = s [1]: (s = ua. match (/firefox \/([\ d.] + )/))? Sys. firefox = s [1]: (s = ua. match (/chrome \/([\ d.] + )/))? Sys. chrome = s [1]: (s = ua. match (/opera. ([\ d.] + )/))? Sys. opera = s [1]: (s = ua. match (/version \/([\ d.] +). * safari /))? Sys. safari = s [1]: 0;

If (Sys. ie! = Null ){
Return ("IE:" + Sys. ie); // determine the IE browser and version number
}
If (Sys. firefox! = Null ){
Return ("firefox:" + Sys. firefox); // determine the firefox browser and version number
}
If (Sys. chrome! = Null ){
Return ("chrome:" + Sys. chrome); // determine the chrome browser and version number
}
If (Sys. opera! = Null ){
Return ("opera:" + Sys. opera); // determine the opera Browser and version number
}
If (Sys. safari! = Null ){
Return ("safari:" + Sys. safari); // determine the safari browser and version number
}
}

4: event listening

The Code is as follows:

Function (element, type, handler ){
If (element. addEventListener ){
Element. addEventListener (type, handler, false );
}
Else
If (element. attachEvent ){
Element. attachEvent ("on" + type, handler );
}
Else {
Element ["on" + type] = handler;
}
}

5: Event Removal

The Code is as follows:

Function (element, type, handler ){
If (element. removeEventListener ){
Element. removeEventListener (type, handler, false );
}
Else
If (element. detachEvent ){
Element. detachEvent ("on" + type, handler );
}
Else {
Element ["on" + type] = null;
}
}

6: Get the event. When Firefox events are continuously distributed, the first event will be faulty.

The Code is as follows:

Function (event ){

Event = (event? Event: window. event );
If (event = null ){
Var $ E = function (){
Var c = $ E. caller;
While (c. caller)
C = c. caller;
Return c. arguments [0]
};
_ DefineGetter _ ("event", $ E );
}
Return event;
}

7: block default events

The Code is as follows:

Function (event ){
If (event. preventDefault ){
Event. preventDefault ();
}
Else {
Event. returnValue = false;
}
}

8: do not continue to spread events

The Code is as follows:

Function (event ){
If (event. stopPropagation ){
Event. stopPropagation ();
}
Else {
Event. cancelBubble = true;
}
}

9: Get the target of the event

The Code is as follows:

Function (event ){
Return event.tar get | event. srcElement;
}

10: inconsistent en.doc types

E: if there is a document description, it will be interpreted as an incorrect one, and the value of document.doc type is always null.

Firefox: if there is a document description, set it as the first subitem of the document. document.doc type is a DocumentType node. You can also access the same node through firstChild or childNodes [0.

Safari, Chrome, and Opera: if there is a document type description, it will be interpreted, but it will not appear in childNodes if it is not a subnode of the document.

11: Search for elements
Sometimes, I really don't understand what IE is always doing, and I always want to be unconventional. If the system does not allow its own browser, I dare say that the share of IE will be less.

If the id is the same as the name, it will be returned.

The Code is as follows: