Different use of IE and Firefox in JavaScript

1. CSS "float" value
The most basic syntax for accessing a given CSS value is: object. style. property, replace the value with a connector using the camper method. For example, to access the background-color value of <div> with an ID of "header", 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 an element, 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 <label> label"
As mentioned in point 3rd, we also need to access the "for" in the <label> label using non-existent syntactic differentiation ":

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 "drag position" to compensate for such differences, 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 ";