First, the script differences:
1, event binding: AddEventListener and Attachevent event handler in this point is different, ie point to Window2, Get Event object: Event handler function Window.event 3, get the DOM element that triggers the event: Targe T SRCELEMENT4, block default behavior: E.preventdefault () e.returnvalue= FALSE5, block bubbling: e.stoppropagation () e.cancelbubble = true;6, get style letter Interest: getComputedStyle (obj,null). Width Currentstyle.width7, instantiate xhr object New XMLHttpRequest () Newactivexobject () 8, get DOM element: ParentNode parentelement Two, CSS difference 1,!important the highest priority, in the IE6 the following exception.IE6 and the following browsers have a more explicit support problem exists,!important does not overwrite the rules that fall behind the same style.
Div{color: #f00!important;color: #000} //will not overwrite #000
Rewrite it to the following, which will give priority to applying #000
Div{color: #f00!important;} Div{color: #000;}
1, Box model: 2, E.offsetx E.pagex e.x window.event Object Difference
IE: There are window.event objects
FF: No Window.event object. You can pass an event object to a function's arguments. such as Onmousemove=domousemove (event)
Gets the current mouse coordinates
Ie:event.x and Event.y.
FF:event.pageX and Event.pagey.
Generic: Both have Event.clientx and Event.clienty properties.
The current coordinates of the mouse (plus the distance that the scroll bars are rolled over)
IE:event.offsetX and Event.offsety.
FF:event.layerX and Event.layery.
coordinates of X and y of the label: Style.posleft and Style.postop
IE: there is.
FF: No.
General: Object.offsetleft and Object.offsettop.
Get the height and width of a form
IE:document.body.offsetWidth and Document.body.offsetHeight. Note: This page must have a body tag.
FF:window.innerWidth and Window.innerhegiht, as well as Document.documentElement.clientWidth and document.documentElement.clientHeight.
General: Document.body.clientWidth and Document.body.clientHeight.
Add Event
IE:element.attachEvent ("onclick", func);.
FF:element.addEventListener ("Click", Func, True).
General: Element.onclick=func. Although you can use the OnClick event, the effect of the onclick and the above two methods is different, and the onclick only executes a process, and attachevent and AddEventListener perform a list of processes, that is, multiple processes. For example: Element.attachevent ("onclick", func1), Element.attachevent ("onclick", Func2) such func1 and FUNC2 will be executed.
Here in the broken bridge snow, once wrote a generic add Delete binding event function, you can view the following article: "JavaScript cross browser add Delete event binding function"
Custom Properties for labels
IE: If you define a property value for the tag div1, you can div1.value and div1["value" to get the value.
FF: cannot be taken with Div1.value and div1["value").
Generic: Div1.getattribute ("value").
Parent node, child node, and delete node
Ie:parentelement, Parement.children,element.romovenode (true).
Ff:parentnode, Parentnode.childnodes,node.parentnode.removechild (node).
Clientx,pagex,offsetx,x,layerx,screenx,offsetleft
ScreenX: The coordinates of the mouse on the display screen.
ClientX: The coordinates of the mouse in the page display area.
Note: The above two are all common to each browser. The following are unique methods:
Pagex:ff unique, the mouse position on the page, from the top left corner of the page to locate, this can be very convenient to locate the entire page, IE does not directly replace the properties.
LAYERX:FF is unique, the mouse relative to "the element of the triggering event is closest to the element in the hierarchy, set the position parent element" the position of the boundary, starting from the upper left corner of the border, that is, if the parent element exists border, The coordinate origin is in the upper-left corner of the border, not the upper-left corner of the content area.
Offsetx:ie unique, the mouse relative to the "trigger event element" position, from the upper left corner of the content area to start positioning, not from the upper left corner of the border! This property is useful for determining where the mouse point is in an element, and the FF has no directly substituted properties.
X:ie unique, with Layerx an effect, can be used as a direct replacement for Layerx properties.
Note: IE and FF positioning there is a 1px difference, in fact, ie positioning starting from 0, ff positioning starting from 1, FF will always be bigger than IE 1px, need to deal with the actual situation.
Offsetleft: This property is not a property of the event object, but is all of the DOM object, which represents the position of the DOM object in the "closest to the object in the DOM object's hierarchy, set the parent of the position", although that is true, However, different browsers do not have the same effect.
FF is strictly performed as described above, but in Ie6/7, this property returns the position of the DOM object in its immediate parent object, but IE8 corrects the problem, but IE8 has a new problem, and the other browsers are positioned from the upper left corner of the content area of the parent object. The IE8 is actually positioned from the upper left corner of the parent element's border, and because the test environment is IE8 in IETester, the problem of IETester cannot be ruled out.
JS a summary of some of the compatibility of IE and FF
