7 JavaScript differences between FF and IE

Although JavaScript’s historical days of using long and annoying blocks of code to target specific browsers are over, the occasional use of some simple code blocks and object detection to ensure that some code works properly on the user’s machine is still Necessary.

In this article, I will briefly outline 7 aspects of JavaScript syntax between Internet Explorer and Firefox.

1. CSS “float” property
The basic syntax for obtaining a specific CSS property of a given object is the object.style property, and hyphenated properties use camel nomenclature to replace. For example, to get the background-color attribute of p with the ID "header", we need to use the following syntax:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
But Since "float" is a reserved word in JavaScript, we cannot use object.style.float to obtain the "float" attribute. The following is the method we use in the two browsers:

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

2. Calculated style of element
By using the above object.style.property, JavaScript can easily obtain and modify the object's set CSS style. But the limitation of this syntax is that it can only get styles inline in HTML, or styles set directly using JavaScript. The style object cannot obtain styles set using external style sheets. To get the "calculated style" of an object, we use the following code:

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

3. Get the "class" attribute of the element
Similar to the case of the "float" attribute, the two browsers use different JavaScript methods to obtain this attribute.

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

4. Get the "for" attribute of the label
Same as 3, use JavaScript to get the label The "for" attribute also has different syntax.

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

The same syntax is also used for the setAtrribute method.

5. Get the cursor position
Getting the cursor position of an element is rare. If you need to do this, the syntax of IE and Firefox is also different. This example code is fairly basic and is typically used as part of many complex event handlers, and is only used here to describe the differences. Note that the results in IE are different than in Firefox, so there are some issues with this approach. Usually, this difference can be compensated by getting the "scroll position" - but that's a topic for another article.

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

6. Get the size of the window or browser window
Sometimes it is necessary to find out the size of the effective window space of the browser, which usually becomes "Windows".

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

7. Alpha transparency
Well, this is not actually a JavaScript syntax item - alpha transparency is through CSS to set. But when an object is set to fade via JavaScript, this needs to be accomplished by getting the CSS alpha setting, typically inside a loop. To change the CSS code through the following javaScript:

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

#myElement { 
opacity: 0.5; 
}

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

IE syntax:

The code is as follows:

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

Firefox syntax:

The code is as follows:

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

Of course, as already mentioned, the opcity/alpha is usually changed in the middle of the loop to create animation effects, but this is a simple example just to clearly describe how the method is implemented.