A brief analysis of the different performance of JavaScript in IE and Firefox _javascript skills

Source: Internet
Author: User
1.document.formname.item ("ItemName") problem
Note: Under IE, you can use Document.formName.item ("ItemName") or document.formname.elements["elementname"]; Firefox, you can only use the document.formname.elements["ElementName"].
Workaround: Unify the use of document.formname.elements["ElementName"].
2. Collection Class object problem
Note: IE, you can use () or [] get the Collection class object; Firefox, you can only use [] to get collection class objects.
WORKAROUND: Use [] to get collection class objects uniformly.
3. Custom attribute Issues
Note: Under IE, you can get the custom attribute by using the method of obtaining the General property, or you can use GetAttribute () to get the definition attribute. Firefox, you can only use getattribute () to get the definition attribute.
Workaround: The unification is obtained from the defined attribute through GetAttribute ().
4.eval ("idname") problem
Note: Under IE, you can use either eval ("Idname") or getElementById ("Idname") to obtain an HTML object with an ID of idname; Firefox can only use getElementById ("Idname") to get an HTML object with an ID of idname.
Workaround: Unify the getElementById ("Idname") to get the HTML object with the ID idname.
5. Variable name and an HTML object ID the same problem
Note: Under IE, the ID of HTML object can be used directly as the subordinate object variable name of document; Firefox is not. Firefox, you can use the same variable name as the HTML object ID, ie cannot.
Workaround: Use document.getElementById ("Idname") instead of document.idname. It is best not to take a variable name with the same HTML object ID to reduce the error; When declaring a variable, add var to avoid ambiguity.
7.input.type Property Problem
Note: IE under the Input.type property is read-only, but Firefox under the Input.type property is read and write.
9.event.x and EVENT.Y problems
Note: Under IE, the even object has x,y attribute, but there is no pagex,pagey attribute; Firefox, even objects have pagex,pagey properties, but no x,y properties.
Workaround: Use mx (mx = event.x Event.x:event.pagex) to replace the event.x under IE or the Event.pagex under Firefox.
10.event.srcelement problem
Note: Under IE, the event object has srcelement attribute, but there is no target attribute; Firefox, the event object has the target attribute, but there is no srcelement attribute.
Workaround: Use obj (obj = event.srcelement event.srcElement:event.target) to replace the event.srcelement under IE or the Event.target under Firefox.
13.frame problem
Take the following frame as an example:
<frame src= "xxx.html" id= "Frameid" name= "FrameName"/>
(1) Access to the Frame object:
IE: Use Window.frameid or window.framename to access this frame object.
Firefox: You can only use Window.framename to access this frame object.
In addition, Window.document.getElementById ("Frameid") can be used in IE and Firefox to access this frame object.
(2) Switch frame content:
Window.document.getElementById ("Testframe") can be used in both IE and Firefox. src = "xxx.html" or window.frameName.location = " Xxx.html "to toggle the contents of the frame.
If you need to return the parameters in the frame 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
The body of Firefox exists before the body tag is fully read into the browser, and IE's body must be fully read by the browser before the body tag is present.
For example:
Firefox:
Copy Code code as follows:

<body>
<script type= "Text/javascript" >
Document.body.onclick = function (evt) {
EVT = EVT | | window.event;
alert (EVT);
}
</script>
</body>

Ie&firefox:
Copy Code code as follows:

<body>
</body>
<script type= "Text/javascript" >
Document.body.onclick = function (evt) {
EVT = EVT | | window.event;
alert (EVT);
} </script>

15. Event Delegate Method
IE:document.body.onload = inject; Function inject () was implemented prior to this
Firefox:document.body.onload = inject ();
Some say the standard is:
Copy Code code as follows:

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

The difference between Firefox and the parent element of IE (parentelement)
IE:obj.parentElement
Firefox:obj.parentNode
Workaround: Because both Firefox and IE support DOM, using Obj.parentnode is a good choice.
17.innerText works well in IE, but innertext is not available in Firefox.
Workaround:
Copy Code code as follows:

if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else{
document.getElementById (' element '). Textcontent = "my text";
}

The statements in Firefox that resemble obj.style.height = Imgobj.height are not valid
Workaround:
Copy Code code as follows:

Obj.style.height = imgobj.height + ' px ';

Ie,firefox and other browsers for table label operations are different, in IE does not allow the table and TR innerHTML assignment, using JS to add a TR, the use of Appendchile method does not use.
Workaround:
Copy Code code as follows:

Append a blank line to the table:
var row = Otable.insertrow (-1);
var cell = document.createelement ("TD");
cell.innerhtml = "";
Cell.classname = "XXXX";
Row.appendchild (cell);

padding question
padding 5px 4px 3px 1px Firefox can not be explained in shorthand,
Must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
21. Elimination of UL, OL and other lists of indentation
Style should be written: list-style:none;margin:0px;padding:0px;
Where the margin property is effective for IE, the padding attribute is effective for Firefox
CSS Transparent
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
CSS rounded Corners
IE: Round corners are not supported.
FF:-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;.
CSS double-line beveled border
IE:BORDER:2PX outset;
FF:-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 and Firefox does not support
Instead of document.all, use one of the three tags below.
getElementsByTagName ("TagName") can get a collection of all the tag elements
getElementById ("Idname") can get an element by ID
Getelementsbyname ("name") can get an element by the Name property
26. The method of using innerHTML in Firefox
Copy Code code as follows:

<div id= "Online" ></div>
Document.all.online.innerHTML; This method can be used in IE, but not the standard method
document.getElementById ("Online"). InnerHTML; So Firefox can use innerHTML.

27. Eval () and Window.execscript () Execute script
IE, Firerox support eval (), Firefox does not support Window.execscript ()
Workaround: Use eval () uniformly
28. Rewrite the event handler function
Resolve: (for example): If the document's onclick () rewrite, unify the use of Document.onclick = function () {...}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.