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

The version of my browser is chrome15.0.874.121 Firefox 8.01 IE9 IETester.

The following Code declares

1: Obtain the scroll bar
Copy codeThe 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.
Copy codeThe 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
Copy codeThe 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
Copy codeThe 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
Copy codeThe 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.
Copy codeThe 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
Copy codeThe Code is as follows:
Function (event ){
If (event. preventDefault ){
Event. preventDefault ();
}
Else {
Event. returnValue = false;
}
}

8: do not continue to spread events
Copy codeThe Code is as follows:
Function (event ){
If (event. stopPropagation ){
Event. stopPropagation ();
}
Else {
Event. cancelBubble = true;
}
}

9: Get the target of the event
Copy codeThe 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.

Copy codeThe Code is as follows:
<Html>
<Head>
<Script defer>
Var item = document. getElementById ("my ");
Item. value = "SECOND ";

</Script>
</Head>
<Body>
<Input type = "text" name = "my" value = "FIRST">
</Body>
</Html>

In IE, The result changes.

The same is IE, And the Id is case insensitive.
Copy codeThe Code is as follows:
<Html>
<Head>
<Script defer>
Var item = document. getElementById ("MY ");
Item. value = "SECOND ";

</Script>
</Head>
<Body>
<Input type = "text" id = "my" value = "FIRST">
</Body>
</Html>

Sorry, his results have changed.

12: if it is a custom attribute, item. myattributs cannot produce correct results without an IE browser.
Copy codeThe Code is as follows:
Function (item, myatt ){
Return item. attributes [myatt]. value;
}

In the same way, you should know what to do when setting properties, that is, assigning values.
Copy codeThe Code is as follows:
Function (item, myatt, value ){
Item. attributes [myatt]. value = value;
}

13: Number of child nodes of the element
Copy codeThe Code is as follows:
<Ul id = "myul">
<Li> first </li>
<Li> second </li>
<Li> third </li>
</Ul>

The IE result is 3, and the other browsers are 7.

A blank character between nodes. In other browsers, it is a text Node and the result is 7. If so,
Copy codeThe Code is as follows:
<Ul id = "myul"> <li> first </li> <li> second </li> <li> third </li> </ul>

In this way, all results are 3.
14: node Creation
Copy codeThe Code is as follows:
// Add an Element dynamically, which can be implemented by all browsers.
Var newnode = document. createElement ("input ");
Newnode. type = "button ";
Newnode. value = "sixth ";
// This can be implemented in IE
Var newnode = document. createElement ("<input type = \" button \ "> ");

15: when the right-click is blocked, firefox is different from others in the oncontextmenu event.

16: When style and script are dynamically added, IE is different from other browsers. Check for details.

17: For DOM2 and DOM3, the situation is more complicated.