Seven differences between JavaScript in IE and Firefox

Even though it's time to use long string, dull, and different branch code to handle different browsers, occasionally, it is necessary to make some simple differentiation and target detection to ensure that a piece of code can run properly on the user's machine. In this article, the author introduces the differences between 7 JavaScript codes in IE and Firefox.
1. CSS "float" Value
The most basic syntax for accessing a given CSS value is: object. style. property. Use the camper method to replace the value with a connector. For example, access a header

Background-color value of, we use the following syntax:

Document. getElementById ("header"). style. backgroundColor = "# ccc ";
However, because the word "float" is a reserved JavaScript word, we cannot use object. style. float for access. Here, we can do this in two browsers:
Write in IE as follows:

Document. getElementById ("header"). style. styleFloat = "left ";
Write in Firefox as follows:

Document. getElementById ("header" ).style.css Float = "left ";

2. Calculation style of Elements
JavaScript can use object. style. property syntax, which allows you to easily access and modify a CSS style externally. However, the restriction is that these syntaxes can only retrieve the style set in the row or directly set by JavaScript. You cannot access an external style sheet. To access the "Estimate" style of elements, we can use the following code:
Write in IE as follows:

Var myObject = document. getElementById ("header ");
Var myStyle = myObject. currentStyle. backgroundColor;
Write in Firefox as follows:

Var myObject = document. getElementById ("header ");
Var myComputedStyle = document. defaultView. getComputedStyle (myObject, null );
Var myStyle = myComputedStyle. backgroundColor;
3. Access the "class" of the element"
Like "float", "class" is a reserved word of JavaScript. In these two browsers, we use the following syntax to access "class ".
Write in IE as follows:

Var myObject = document. getElementById ("header ");
Var myAttribute = myObject. getAttribute ("className ");
Write in Firefox as follows:

Var myObject = document. getElementById ("header ");
Var myAttribute = myObject. getAttribute ("class ");
This syntax wowould also apply using the setAttribute method.

4. Access"For" in the tag"
As mentioned in point 3rd, we also need to use non-existent syntaxes to access"For" in the tag:
Write in IE as follows:

Var myObject = document. getElementById ("myLabel ");
Var myAttribute = myObject. getAttribute ("htmlFor ");
Write in Firefox as follows:

Var = document. getElementById ("myLabel ");
Var myAttribute = myObject. getAttribute ("");
5. Get the cursor position
It may be rare for you to calculate the cursor position, but the syntax in IE and Firefox is different when you need it. The code written here is the most basic and may be a part of the processing of a complex event. But they can explain the similarities and differences. At the same time, it must be noted that the results are different from those of Firefox, and this method itself has bugs. In general, you can use the "drag position" to compensate for this difference, but it is another topic article :)!
Write in IE as follows:

Var myCursorPosition = [0, 0];
MyCursorPosition [0] = event. clientX;
MyCursorPosition [1] = event. clientY;
Write in Firefox as follows:

Var myCursorPosition = [0, 0];
MyCursorPosition [0] = event. pageX;
MyCursorPosition [1] = event. pageY;
6. Obtain the visible area and window size.
Sometimes, we need to find the size of the visible position of the browser, which is usually called "visible area ".
Write in IE as follows:

Var myBrowserSize = [0, 0];
MyBrowserSize [0] = document.doc umentElement. clientWidth;
MyBrowserSize [1] = document.doc umentElement. clientHeight;
Write in Firefox as follows:

Var myBrowserSize = [0, 0];
MyBrowserSize [0] = window. innerWidth;
MyBrowserSize [1] = window. innerHeight;
7. Alpha transparency
Well, this is not a JavaScript syntax problem, but is derived from the Alpha transparency of CSS. However, JavaScript is required when an object needs to fade in/out. This is done by accessing the Alpha transparent settings of CSS, usually in a loop. The JavaScript code you need to modify is as follows:
Write in IE as follows:

# MyElement {filter: alpha (opacity = 50 );}
Write in Firefox as follows:

# MyElement {opacity: 0.5 ;}
Write in IE as follows:

Var myObject = document. getElementById ("myElement ");
MyObject. style. filter = "alpha (opacity = 80 )";
Write in Firefox as follows:

Var myObject = document. getElementById ("myElement"); myObject. style. opacity = "0.5 ";
Is there anything different?
The author (via: 7 JavaScript Differences Between Firefox & IE) personally organized according to his own experience, while sofish is still a newbie in JavaScript. If there are more differences, please share them and learn together!