To refer to the difference between IE and FF in the detail analysis _javascript skills

JS Debugging Tools recommended Firefox Firebug plug-ins

Ability to set breakpoints for JS execution

Ability to modify CSS styles while running

View the DOM model, and so on

☆IE8 's own developerbar is also very good

☆ Turn on Firefox all JS warning:
Input in the Address bar: About:config
Double-click to set Javascriptoptionrestict to true to see many warnings for error correction

☆ie->firefoxjavascript class

document.all ("id")->document.getelementbyid ("id")
And the controls try to use IDs rather than name identities

Tips:
If the control has only name and no ID, when using getElementById:
IE: You can also find objects
FF: Return null

The way to get an element in a form
elform.elements[' name '];

When taking a collection element, IE supports [], () 2 ways of writing, but FF only supports [], such as:
Table.rows (5). Cells (0)
To
Table.rows[5].cells[0]

The method of determining whether an object is objects should be
if (typeof object variable = = "Object")
Instead of if (object variable = = "[Object]")

Eval (object name)->document.getelementbyid
FF supports the Eval function

Calling an object directly by ID
Object Id.value= ""
To
document.getElementById ("name"). Value= ""

Obj.insertadjacentelement ("Beforebegin", Objtext);

Change to use
Obj.parentNode.insertBefore (Objtext,obj);

The createelement of FF does not support HTML code

With document.write (eshtml);

or create an element and then set the property, for the input element, you need to set the type before adding to the DOM
Varobj=createelement ("input");
obj.type= "checkbox";

Varobj2=document.getelementbyid ("Id2");
Obj2.parentNode.insertBefore (OBJ,OBJ2);

If you are inserting HTML code directly, you can consider using the
Createcontextualfragment

Innertext->textcontent

The $ in the object name is not recognized, recommended to _
Objname= "T1$spin"
To
Objname= "T1_spin"

FF set attribute for an object, and then take out, when the object's properties are lost?
Objtext.setattribute ("obj", obj);

Alert (obj.id)//The correct name
Obj=objtext.getattribute ("obj");
Alert (obj.id)//null

There is no problem with IE, FF for setattribute, the 2nd parameter is String type!!!
So if the 2nd argument is an object, it is equivalent to calling the object's ToString () method.

The solution is to use the following invocation method:
Objtext.dropdown_select=obj;
Obj=objtext.dropdown_select

Classname->class
Using class under FF to replace the classname under IE
Because class is a keyword, you need to use Setattribute/getattribute.
SetAttribute ("Class", "CSS style name");

Attributes that are defined in HTML must be getattribute.
<tdid= "TD1" isobj= "true" >

When getting:
document.getElementById ("TD1"). Isobj always return to Undefined,ie.

Should use:
document.getElementById ("TD1"). GetAttribute ("Isobj")

FF the Select control is no longer: always displayed at the top
So you might want to set the control's ZIndex
The way to override the select control in IE is to use the Ifame

The value below the IF (vars==undefined) is used to determine the equivalent
Undefined
Null
False
0

If FF calls Obj.focus (), an error is attempted, please try to read:
Window.settimeout (function () {obj.focus ();},20);

FF, KeyCode is read-only, that the conversion to the tab return to do? What to do when inputting key value?

The workaround is:
1. Return to jump-> own write jump processing code.
Iterate through all the elements in the DOM, find the next element that can set the focus for the current element, and set the focus

2. In the control that can be entered,
Replace the selected part with the newly entered content: Vartext=string.fromcharcode (Event.keycode);
Also block key event upload, call: Event.preventdefault ()

<button> will be interpreted by Firefox as submitting form or refreshing the page???
Need to write standard <buttontype= "button" >
Or in onclick= "the original function called (); returnfalse;"

In Firefox, Document.onfocus can't get the control that actually gets the focus?
Why Document.keydown can do it?

Children->childnodes

Sytle.pixelheight->style.height

To determine whether a function or variable exists
if (! () VarName "Inwindow)" varvarname=1;

Document.body.clientWidth

<! Doctypehtmlpublic "-//w3c//dtdxhtml1.0transitional//en" >

If the HTML contains the above statement, you should use the following method to get the
Document.documentElement.clientWidth

Window.createpopup

FF does not support

Document.body.onresize

FF does not support

With Window.onresize

Note that the OnResize event is not triggered when the page is open? You need to call it once in the onload.

The problem with the box model

IE under the default is Content-box for unification, available settings:

div,td{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

You can also add to the document header:

<! Doctypehtmlpublic "-//w3c//dtdxhtml1.0strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

But it has a big impact on IE's old code.

Registering events

Ie:attachevent

Ff:addeventlistener ("Blur", Myblur,false);

The 1th parameter event name does not need to be "on"

The 3rd argument false represents an event pass from the event object along the DOM tree to the body direction

Triggering events

IE:obj.fireEvent ("onclick");

Ff:

Vare=document.createevent ("Events");

E.initevent ("click", True,false);

Element.dispatchevent (Event)

To get an object handle in an event-handling function

Varothis=this;

Obj.onfocus=function (evt) {

Othis.doonfocus (EVT);

}

Unified Event-Handling framework Code

Doonfocus (evt) {

evt=evt| | window.event;

varel=evt.target| | Evt.srcelement;

Subsequent processing

}

FF does not support Onpropertychange events

But in FF you can define the setter method for the attribute, as follows:

htmlelement.prototype.__definesetter__ ("ReadOnly", function (readOnly) {

Constructing a Virtual Event object

Varevt=[];

evt["Target"]=this;

evt["PropertyName"]= ' readOnly '

The Onpropertychange function needs to define EVT parameters, refer to the Unified Event handling framework code

if (this.onpropertychange) This.onpropertychange (EVT);

});

☆ie->firefoxcss class

Cursor:hand->cursor:pointer

Expressionfirefox does not support

Under IE expression also very consumes CPU, so should not use!!

In order to achieve better results, you should establish your own expressiontojavascript processing function

This can be used in both IE and ff.

Filterfirefox does not support

Filter:alpha (OPACITY=50);

Replaced by

-moz-opacity:0.5;

Text-overflow

does not support

Transparent

Firefox under Obj.setattribute ("bgcolor", "#ffffff") only supports color

You have to use obj.style.backgroundcolor= "transparent".

FF under the text control height and IE different, unified

input[type=text]{

height:20px;

}

Note that input and [can not have spaces between!]

Font in IE can not be on the body and TD, etc., FF can

Unified Use Font-family