The difference between the reference js in IE and FF is explained in detail

  • 2020-03-29 23:54:21
  • OfStack

Js debugging tools recommend firefox's firebug plug-in

The ability to set breakpoints for js execution

Ability to modify CSS styles at run time

View the dom model, etc

Do things IE8 also comes with a great developerbar

Do things open all firefox js warnings:
Type about:config in the address bar
Double click, set javascriptoptionrestict open to true to see a lot of warnings to help correct errors

Nurture - IE > Firefoxjavascript class

Delta document. All (" id ") - > Document. The getElementById (" id ")
And the control should always be identified with an id, not a name

If the control has only name and no id, use getElementById:
IE: you can also find objects
FF: returns NULL

Delta method to obtain an element in the form
ElForm. Elements [' name '];

The method to determine whether an object is an object should be delta
If (typeof object variable =="object")
Instead of if(object variable =="[object]")

delta calls the object directly through the id
Object id. Value = ""
Instead of
Document. The getElementById (" name "). The value = ""

Delta obj. InsertAdjacentElement (" beforeBegin objText);

Instead of using
Obj. ParentNode. InsertBefore (objText, obj);

With the document. The write (esHTML);

Or you can set the attributes after you create the element. For the input element, you need to set the type before you add it to the dom
Varobj = createElement method (" input ");
Obj. Type = "checkbox";

Varobj2 = document. GetElementById (" id2 ");
Obj2. ParentNode. InsertBefore (obj, obj2);

If you're inserting HTML code directly, consider using it

Delta the innerText - > textContent

The $in the object name is not recognized, it is recommended to _
ObjName = "t1 $spin"
Instead of
ObjName = "t1_spin"

delta FF sets an Attribute to an object, and then retrieves it, and the properties of the object are lost?
ObjText. SetAttribute (" obj ", obj);

Alert ( correct name
Obj = objText. GetAttribute (" obj ");
Alert (obj. Id) / / null

There is no problem under IE,FF for setAttribute, the second parameter is string!!
So if the second argument is an object, you're calling the object's toString() method

The solution is to use the following method:
ObjText. Dropdown_select = obj;
Obj = objText dropdown_select

Delta className - > The class
Replace the className under IE with class under FF
Because the class is the key word, so you need to use the setAttribute/getAttribute
SetAttribute ("class"," CSS style name ");

delta attributes defined in HTML, you must use getAttribute
< Tdid = "TD1" isOBJ = "true" >

When access to:
Document.getelementbyid ("TD1").isobj always returns undefined,IE is ok

To use:
Document. The getElementByID (" TD1 "). The getAttribute (" isOBJ ")

Delta FF select control is no longer: always at the top
So you might want to set the zIndex of the control
The way to override the select control in IE is to use ifame

delta the value below if(vars==undefined) is used to determine that it is equivalent

delta if FF calls obj.focus(); Error report, please try to change to:
Window. The setTimeout (function () {obj. Focus (); }, 20);

Delta FF,keyCode is read-only, how to convert the return to TAB? What about key value conversion at entry time?

The workarounds are:
1. Return jump -> Write your own jump handling code.
Walk through all the elements in the dom, find the next element of the current element that can set the focus, and give it the focus

2. In controls that can be typed,
Vartext = string.fromcharcode (event.keycode);
Prevent key events from being uploaded, call: event.preventdefault ()

Delta < Button> Will be interpreted by firefox to submit a form or refresh a page??
You need to write standards < Buttontype = "button" >
Or onclick=" function call (); Returnfalse;"

Delta in firefox,document.onfocus gets a control that doesn't actually get focus?
Why document.keydown works?

Delta children - > .childnodes

Delta sytle. PixelHeight - > Style. The height

Delta determines whether a function or variable exists
If (! (" varName "inwindow)) varVarName = 1;

Delta document. Body. ClientWidth

< ! DOCTYPEhtmlPUBLIC "- / / / / W3C DTDXHTML1.0 Transitional / / EN" >

If the HTML contains the above statement, it should be retrieved using the following method
Document. The documentElement. ClientWidth

Delta window. CreatePopup

Delta document. Body. Onresize

In the window. Onresize

Note that the onresize event is not triggered when the page opens, right? It needs to be called once in onload as well

Problems with the delta box model

The default under IE is content-box. For unification, the following Settings can be used:

Div, td {- moz - box - sizing: border - box; The box - sizing: border - box; Margin: 0; Padding: 0; }

Can also be added to the document header:

< ! DOCTYPEhtmlPUBLIC "- / / / / W3C DTDXHTML1.0 Strict / / EN" "" >

But the old IE code has a greater impact

Delta registration event

IE: attachEvent

FF: addEventListener (" blur ", myBlur, false);

The first parameter event name does not need to be "on"

The third parameter, false, represents event passing from the event object down the dom tree to the body

Delta trigger event

IE: obj. FireEvent (" onclick ");


Vare = document. CreateEvent (" Events ");

E.i nitEvent (" click ", true, false);

Element. DispatchEvent (event)

delta gets the object handle in the event handler

VaroThis = this;

Obj. An onfocus = function (evt) {

OThis. DoOnFocus (evt);


Code for the unified event handling framework

DoOnFocus (evt) {

Evt = evt | | window. The event;

Varel = evt. Target | | evt. SrcElement;

// follow-up


However, the setter method of the property can be defined in FF, as follows:

HTMLElement. Prototype. __defineSetter__ (" readOnly ", function (readOnly) {

// construct a virtual event object

Varevt = [];

Evt/" target = this;

Evt [" propertyName] = 'readOnly'

// the onpropertychange function needs to define the evt parameter, referring to the unified event handling framework code

If (this. Onpropertychange) enclosing onpropertychange (evt).


Nurture - IE > Firefoxcss class

Delta cursor: hand - > Cursor: pointer

Expression also consumes a lot of CPU in IE, so it should not be used!!

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

This will work in both IE and FF.

The filter: Alpha (Opacity = 50);

Replace with

Moz - opacity: 0.5;

Delta text - overflow

Delta transparent

Must use obj. Style. BackgroundColor = "transparent"

delta FF under the text control height and IE different, unified

Input [type = text] {

Height: 20 px;


Note that there should be no space between input and [!

delta font in IE does not work for body, td, etc.,FF does

Unified with the font-family

Related articles: