Shulou(Shulou.com)06/02 Report--

How to understand the different performance of JavaScript in IE and FireFox, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Javascript has many different behaviors in IE and FireFox. Here are some common differences. An in-depth understanding of these differences can help Web developers and designers avoid common sense mistakes and improve development efficiency.

1.document.formName.item ("itemName") problem

Note: under IE, you can use document.formName.item ("itemName") or document.formName.elements ["elementName"]; under Firefox, you can only use document.formName.elements ["elementName"].

Solution: uniformly use document.formName.elements ["elementName"].

two。 Set class object problem

Note: under IE, you can use () or [] to get collection objects; under Firefox, you can only use [] to get collection objects.

Solution: uniformly use [] to get collection class objects.

3. Custom attribute problem

Description: under IE, you can use the method of getting general attributes to get custom attributes, or you can use getAttribute () to obtain custom attributes; under Firefox, you can only use getAttribute () to get custom attributes.

Solution: get custom attributes uniformly through getAttribute ().

4.eval ("idName") problem

Note: under IE, you can use eval ("idName") or getElementById ("idName") to get the HTML object whose id is idName; under Firefox, you can only use getElementById ("idName") to get the HTML object whose id is idName.

Solution: uniformly use getElementById ("idName") to get the HTML object whose id is idName.

5. The problem that the variable name is the same as a HTML object ID

Note: under IE, the ID of HTML object can be used directly as a subordinate object variable name of document; under Firefox, you can use the same variable name as HTML object ID; under Firefox, you can use the same variable name; IE cannot.

Solution: use document.getElementById ("idName") instead of document.idName.*** do not take the same variable name of the HTML object ID to reduce errors; when declaring variables, always add var to avoid ambiguity.

7.input.type attribute problem

Note: the input.type attribute under IE is read-only, but the input.type attribute under Firefox is read-write.

9.event.x and event.y problem

Note: under IE, the even object has the XMagy attribute, but no pageX,pageY attribute; under Firefox, the even object has the pageX,pageY attribute, but no XMagy attribute.

Solution: use mX (mX = event.x? Event.x: event.pageX;) to replace event.x under IE or event.pageX under Firefox.

10.event.srcElement problem

Note: under IE, event objects have srcElement attributes, but no target attributes; under Firefox, event objects have target attributes, but no srcElement attributes.

Solution: use obj (obj = event.srcElement? Event.srcElement: event.target;) to replace event.srcElement under IE or event.target under Firefox.

13.frame problem

Take the following frame as an example:

(1) access the frame object:

IE: use window.frameId or window.frameName to access this frame object.

Firefox: only window.frameName can be used to access this frame object.

In addition, you can use window.document.getElementById ("frameId") to access this frame object in both IE and Firefox.

(2) switch frame content:

You can use window.document.getElementById ("testFrame") .src = "xxx.html" or window.frameName.location = "xxx.html" to switch the content of frame in both IE and Firefox. If you need to pass parameters from frame back to the parent window, you can use parent in frme to access the parent window. For example: parent.document.form1.filename.value= "Aqing"

14.body problem

Firefox's body exists before the body tag is fully read by the browser, while IE's body must exist after the body tag is fully read by the browser.

Firefox:

Document.body.onclick = function (evt) {evtevt = evt | | window.event; alert (evt);}

IE&Firefox:

Document.body.onclick = function (evt) {evtevt = evt | | window.event; alert (evt);}

15. Event delegation method

IE:document.body.onload = inject; / / Function inject () has been implemented before.

Firefox:document.body.onload = inject ()

Some people say that the standard is:

Document.body.onload=new Function ('inject ()')

16. The difference between the parent elements of Firefox and IE (parentElement)

IE:obj.parentElement

Firefox: obj[xss _ clean]

Solution: because both Firefox and IE support DOM, using obj [XSS _ clean] is a good choice.

17.innerText works fine in IE, but innerText does not work in FireFox

If (navigator.appName.indexOf ("Explorer") >-1) {document.getElementById ('element'). InnerText = "my text";} else {document.getElementById (' element'). TextContent = "my text";}

18. A statement similar to obj.style.height = imgObj.height in FireFox is invalid

Solution:

Obj.style.height = imgObj.height + 'px'

19. IE,Firefox and other browsers have different operations on table tags

InnerHTML assignments to table and tr are not allowed in IE, and the appendChile method does not work when adding a tr to JavaScript.

Solution:

/ / append a blank line to table: var row = otable.insertRow (- 1); var cell = document.createElement ("td"); cell [XSS _ clean] = ""; cell.className = "XXXX"; row.appendChild (cell)

20.padding problem

Padding 5px 4px 3px 1px FireFox cannot explain the abbreviation.

Must be changed to:

Padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px

21. When eliminating indentation of ul, ol, etc.

The style should be written as: list-style:none;margin:0px;padding:0px; where the margin attribute is valid for IE and the padding attribute is valid for FireFox.

twenty-two。 CSS transparent

Under IE:

Filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60)

Under Firefox:

Opacity:0.6

23. CSS fillet

Under IE: fillet is not supported.

Under Firefox:

-moz-border-radius:4px or-moz-border-radius-topleft:4px;-moz-border-radius- topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px

24. CSS double-line bump border

Under IE:

Border:2px outset

Under Firefox:

-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8 white;-moz-border-right-colors:#404040 # 808080;-moz-border-bottom-colors:#404040 # 808080

25.IE supports document.all while Firefox does not

Replace document.all with one of the following three tag:

GetElementsByTagName ("tagName") can get a collection of all tag elements getElementById ("idName") can get an element by id ("Name") can get an element by name attribute

26. The method of using innerHTML in Firefox

Document.all.online [XSS _ clean]; / / this method can be used in IE, but it is not the standard method document.getElementById ("online") [xss_clean]; / / so that firefox can use innerHTML

27. Eval () and window.execScript () execute scripts

Both IE and Firerox support eval (), while Firefox does not support window.execScript ().

28. Rewriting the event handler

Solution: (example): if you rewrite onclick () of document, uniformly use _ document.onclick = function () {… }

After reading the above, have you mastered how to understand the different performance of JavaScript in IE and FireFox? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.