1.doc ument. formname. Item ("itemname ")
Description: You can use document. formname. item ("itemname") or document. formname. elements ["elementname"]; In Firefox, only document. formname. elements ["elementname"].
Solution: Use document. formname. elements ["elementname"].
2. Collection class Object Problems
Note: in IE, you can use () or [] to obtain collection class objects. In Firefox, you can only use [] to obtain collection class objects.
Solution: use [] to retrieve collection class objects.
3. Custom Attributes
Note: in IE, you can use the method to obtain general attributes to obtain custom attributes, or use getattribute () to obtain Custom Attributes. In Firefox, you can only use getattribute () obtain custom attributes.
Solution: getattribute () is used to obtain custom attributes.
4. eval ("idname") Problems
Note: in IE, you can use eval ("idname") or getelementbyid ("idname") to obtain the HTML object whose ID is idname. In Firefox, you can only use getelementbyid ("idname ") to obtain the HTML object whose ID is idname.
Solution: getelementbyid ("idname") is used to retrieve the HTML object whose ID is idname.
5. The variable name is the same as the ID of an HTML object.
Note: In ie, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document; in Firefox, it cannot. in Firefox, you can use the same variable name as the HTML Object ID; in IE, you cannot.
Solution: Use document. getelementbyid ("idname") replaces document. idname. we recommend that you do not use variable names with the same HTML Object ID to reduce errors. When declaring variables, add VaR to avoid ambiguity.
7. Input. Type attribute Problems
Description: The input. Type attribute in IE is read-only, but the input. Type attribute in Firefox is read/write.
9. event. X and event. Y
Note: In ie, the even object has the X and Y attributes, but does not have the pagex and Pagey attributes. In Firefox, the even object has the pagex and Pagey attributes, but does not have the X and Y attributes.
Solution: Use MX (MX = event. X? Event. X: event. pagex;) to replace event. X in IE or event. pagex in Firefox.
10. event. srcelement Problems
Note: In ie, the event object has the srcelement attribute, but does not have the target attribute. In Firefox, the event object has the target attribute, but does not have the srcelement attribute.
Solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.targettoken used to replace event.tar get under firefox.
13. Frame Problems
The following frame is used as an example:
<Frame src = "xxx.html" id = "frameid" name = "framename"/>
(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, both ieand firefoxcan access this frame object by using the upload metadata Doc ument. getelementbyid ("frameid.
(2) Switch frame content:
In both ieand firefox, you can use Upload upload Doc ument. getelementbyid ("testframe"). src = "xxx.html" or window. framename. Location = "xxx.html" to switch frame content.
If you want to return parameters in the frame to the parent window, you can use parent in frme to access the parent window. Example: parent.doc ument. form1.filename. value = "aqing ";
14. Body Problems
The body of Firefox exists before the body tag is fully read by the browser. The body of IE must exist only after the body tag is fully read by the browser.
For example:
Firefox:
<Body>
<SCRIPT type = "text/JavaScript">
Document. Body. onclick = function (EVT ){
EVT = EVT | window. event;
Alert (EVT );
}
</SCRIPT>
</Body>
IE & Firefox:
<Body>
</Body>
<SCRIPT type = "text/JavaScript">
Document. Body. onclick = function (EVT ){
EVT = EVT | window. event;
Alert (EVT );
} </SCRIPT>
15. Event delegation Method
IE: Document. Body. onload = inject; // function inject () has been implemented before this
Firefox: Document. Body. onload = inject ();
Some people say the standard is:
Document. Body. onload = new function ('inject ()');
16. Differences between Firefox and IE (parentelement) parent Elements
IE: obj. parentelement
Firefox: obj. parentnode
Solution: because both Firefox and IE support DOM, using obj. parentnode is a good choice.
17. innertext works normally in IE, but innertext does not work in Firefox.
Solution:
If (navigator. appname. indexof ("Explorer")>-1 ){
Document. getelementbyid ('element'). innertext = "My text ";
} Else {
Document. getelementbyid ('element'). textcontent = "My text ";
}
18. The 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 labels. in IE, assigning values to innerhtml of table and TR is not allowed. When adding a Tr using JS, the appendchile method does not work.
Solution:
// Append an empty row to the table:
VaR ROW = otable. insertrow (-1 );
VaR cell = Document. createelement ("TD ");
Cell. innerhtml = "";
Cell. classname = "XXXX ";
Row. appendchild (cell );
20. Padding Problems
Padding 5px 4px 3px 1px Firefox cannot be abbreviated,
Must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px;
21. When the indentation of UL and ol lists is eliminated
Style should be written as: List-style: none; margin: 0px; padding: 0px;
The margin attribute is valid for IE and the padding attribute is valid for Firefox.
22. Transparent CSS
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
23. CSS rounded corners
IE: rounded 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 ;.
24. CSS double-line concave and convex 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, but Firefox does not.
Replace document. All with one of the following three tags.
Getelementsbytagname ("tagname") can be used to obtain a set of all tag elements.
Getelementbyid ("idname") obtains an element by ID.
Getelementsbyname ("name") can get an element by name attribute
26. How to Use innerhtml in Firefox
<Div id = "online"> </div>
Document. All. Online. innerhtml; // This method can be used in IE, but it is not a standard method.
Document. getelementbyid ("online"). innerhtml; // you can use innerhtml in Firefox.
27w.eval(example and window.exe cscript () run the script
Ie、fireroxboth support eval((, firefoxdoes not support window.exe cscript ()
Solution: unified use of eval ()
28. Rewrite event processing functions
Solution: (example): for example, rewrite onclick () of the document and use document. onclick = function (){...}
Bytes --------------------------------------------------------------------------------------
Learning!
1. setattribute
FF: setattribute ('class', value)
IE: setattribute ('classname', value)
FF: setattribute ('style', value)
IE: domobj.style.css text = Value
2. getelementsbyname IE also returns the element whose ID is equal to the given name.
3. getelementbyid: If the given ID matches the name attribute of an element, ie will return this element.
3. The insertrow () method of table does not need to pass parameters for IE, but must be passed for Firefox.
4. var S = 'asldjljflasjdlfjsadljflkjasldjfl \
Sajddajflsjdflajfdlkjsadf \
Askdjflsajdlfkjsalkfdjsalkd ';
Line feed \
5. If there is no content in the TD in the table, the IE display will be faulty.
6. ie: when obtaining the mouse position of an event, ie uses event. X and event. Y, and the value can be directly used without adding a unit. IE provides the default unit;
Div. style. Left = event. x
Div. style. Top = event. Y
In this case, the position displayed by the DIV is the mouse position.
FF: when obtaining the mouse position of an event, Firefox uses mouseevent. pagex and mouseevent. Pagey. If the value is assigned directly without the Unit, it is invalid. The unit must be added.
Div. style. Left = mouseevent. pagex
Div. style. Top = mouseevent. Pagey
In this case, the position of the DIV is 0, 0.
Suggestion: add all units, effective for IE or Firefox.
IE: div. style. Left = event. x + 'px'
Div. style. Top = event. Y + 'px'
FF: div. style. Left = mouseevent. pagex + 'px'
Div. style. Top = mouseevent. Pagey + 'px'
7. String does not have the trim () method, but is implemented in Firefox. IE does not exist.
8. The date. parse function in IE. For the date in '2017-10-01 'format, ie returns Nan, and Firefox parses normally;
This format is applicable to browsers like 10/01/2010.
9. Add two methods to the string object:
String. Prototype. Trim = function (){
VaR reextraspace =/^ \ s + (.*?) \ S $ /;
Return this. Replace (reextraspace, '$1 ');
}
String. Prototype. replaceall = function (S1, S2 ){
Return this. Replace (New Regexp (S1, "GM"), S2 );
}
========================================================== ========================================================== =====
1: innertext
Supported by IE, not supported by Firefox
Solution: Use innerhtml and both browsers to recognize innerhtml
2: Document. createelement
Document. appendchild
Insert rows into the table
Supported by Firefox, not supported by IE
Solution: Insert rows into the tbody instead of the table.
3: setattribute ('style', 'color: red ;')
Supported by Firefox (except IE, supported by all browsers now), not by IE
Solution: Do not use setattribute ('style', 'color: red ')
Use object.style.css text = 'color: red; '(this is also an exception)
The best way is to use the above methods.
4: Class
Setattribute ('class', 'styleclass ')
Supported by Firefox and not supported by IE (if the attribute is specified as class, ie will not set the class attribute of the element. On the contrary, ie will automatically identify the classname attribute only when setattribute is used)
Solution:
Setattribute ('class', 'styleclass ')
Setattribute ('classname', 'styleclass ')
Use both
5: Use setattribute to set events
VaR OBJ = Document. getelementbyid ('objid ');
OBJ. setattribute ('onclick', 'funcitonname ();');
Supported by Firefox, not supported by IE
Solution:
In ie, the vertex method must be used to reference the required event processing. Program And grant the anonymous Function
As follows:
VaR OBJ = Document. getelementbyid ('objid ');
OBJ. onclick = function () {fucntionname ();};
All browsers support this method.
6. Create a radio button.
Browsers other than IE
VaR rdo = Document. createelement ('input ');
Rdo. setattribute ('type', 'Radio ');
Rdo. setattribute ('name', 'radiobtn ');
Rdo. setattribute ('value', 'checked ');
IE:
VaR rdo = Document. createelement ("<input type = 'Radio 'name = 'radiobtn' value = 'checked'> ");
Solution:
The difference is different from the previous one. This time is completely different, so we cannot find a common solution, so only if-else is available.
Fortunately, ie can identify the uniqueid attribute of the document. other browsers cannot recognize this attribute. Solve the problem.
0: common skills
When dynamically creating Input elements, we usually add them first and set the type. This may cause errors.
Good Habit: var BTN = Document. createelement ('input ');
BTN. setattribut ('type', 'click ');
Document. getelementbyid ('formid '). appendchild (BTN );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
