7 JavaScript differences between Firefox and IE

Although the history of using lengthy and annoying code blocks in JavaScript to mark specific browsers has ended, however, it is necessary to occasionally use some simple code blocks and object detection to ensure that some code works normally on the user's machine.

BKJIA recommended reading: different performance of JavaScript in IE and FireFox

1. CSS "float" attributes

The basic syntax for getting a specific CSS attribute of a given object is the object. style attribute, and the attributes with hyphens must be replaced by the camel naming method. For example, to obtain the background-color attribute of a div whose ID is "header", we need to use the following syntax:

 
 

  
  
document.getElementById("header").style.borderBottom= "1px solid #ccc"; 
  
  
 
 
 

However, because "float" is a reserved word in JavaScript, we cannot use object. style. float to obtain the "float" attribute. Here is how we use these two browsers:

IE Syntax:

 
 

  
  
document.getElementById("header").style.styleFloat = "left";
  
  
 
 
 

Firefox Syntax:

 
 

  
  
document.getElementById("header").style.cssFloat = "left"; 
  
  
 
 
 

2. Calculation style of Elements

By using the above object. style. property, JavaScript can easily obtain and modify the CSS style of an object. However, the limitation of this syntax is that it can only get the inline style in HTML, or directly use the style set by JavaScript. The style object cannot obtain the styles set using the external style table. To obtain the "calculation style" of an object, use the following code:

IE Syntax:

 
 

  
  
var myObject = document.getElementById("header");  
  
  
var myStyle = myObject.currentStyle.backgroundColor; 
 
 

Firefox Syntax:

 
 

  
  
var myObject = document.getElementById("header");  
  
  
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);  
  
  
var myStyle = myComputedStyle.backgroundColor; 
 
 

3. Obtain the "class" attribute of an element.

Similar to the "float" attribute, the two browsers use different JavaScript methods to obtain this attribute.

IE Syntax:

 
 

  
  
var myObject = document.getElementById("header");  
  
  
var myAttribute = myObject.getAttribute("className"); 
 
 

Firefox Syntax:

 
 

  
  
var myObject = document.getElementById("header");  
  
  
var myAttribute = myObject.getAttribute("class"); 
 
 

4. Obtain the "for" attribute of the label.

As with the third question, using JavaScript to obtain the label's "for" attribute also has different syntaxes.

IE Syntax:

 
 

  
  
var myObject = document.getElementById("myLabel");  
  
  
var myAttribute = myObject.getAttribute("htmlFor"); 
 
 

Firefox Syntax:

 
 

  
  
var myObject = document.getElementById("myLabel");  
  
  
var myAttribute = myObject.getAttribute("for"); 
 
 

The same syntax is used for the setAtrribute method.

5. Obtain the cursor position

It is rare to obtain the cursor position of an element. If you need to do so, the syntax of IE and Firefox is different. This sample code is quite basic and is generally used as part of processing many complex events. Here it is only used to describe the differences. It should be noted that the results in IE are different from those in Firefox, so this method has some problems.

IE Syntax:

 
 

  
  
var myCursorPosition = [0, 0];  
  
  
myCursorPosition[0] = event.clientX;  
  
  
myCursorPosition[1] = event.clientY; 
 
 

Firefox Syntax:

 
 

  
  
var myCursorPosition = [0, 0];  
  
  
myCursorPosition[0] = event.pageX;  
  
  
myCursorPosition[1] = event.pageY; 
 
 

6. Obtain the size of the window or browser window

Sometimes you need to find out the size of the valid window space of the browser, which is generally "window ".

IE Syntax:

 
 

  
  
var myBrowserSize = [0, 0];  
  
  
myBrowserSize[0] = document.documentElement.clientWidth;  
  
  
myBrowserSize[1] = document.documentElement.clientHeight; 
 
 

Firefox Syntax:

 
 

  
  
var myBrowserSize = [0, 0];  
  
  
myBrowserSize[0] = window.innerWidth;  
  
  
myBrowserSize[1] = window.innerHeight; 
 
 

7. Alpha transparency

This is actually not a JavaScript syntax project-alpha transparency is set through CSS. However, when the object is set to fade in and out through JavaScript, it needs to be implemented by obtaining the alpha setting of CSS, which is generally within the loop. Use the following JavaScript to change the CSS code:

IE Syntax:

 
 

  
  
#myElement {  
  
  
filter: alpha(opacity=50);  
  
  
} 
 
 

Firefox Syntax:

 
 

  
  
#myElement {  
  
  
opacity: 0.5;  
  
  
} 
 
 

To obtain these values using JavaScript, you need to use the style object:

IE Syntax:

 
 

  
  
var myObject = document.getElementById("myElement");  
  
  
myObject.style.filter = "alpha(opacity=80)"; 
 
 

Firefox Syntax:

 
 

  
  
var myObject = document.getElementById("myElement");  
  
  
myObject.style.opacity = "0.5"; 
 
 

Of course, we have already mentioned that it is generally used to change opcity/alpha in the middle of a loop to create an animation effect. But this is a simple example, to clearly describe how the method is implemented.