JavaScript differences between IE and Firefox

In this article, I'll outline some of the different aspects of Internet Explorer and Firefox in JavaScript syntax.

1. CSS "Float" property

The basic syntax for getting a specific CSS property for a given object is the Object.style property, and the properties of the hyphen are replaced by the camel name. For example, to get an background-color attribute for a div with the ID "header", we would use the following syntax:

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

But because "float" is a JavaScript reserved word, we can't use object.style.float to get the "float" attribute. Here's how we use the two browsers:

IE Syntax:

document.getElementById ("header"). Style.stylefloat = "Left";

Firefox Syntax:

document.getElementById ("header"). Style.cssfloat = "Left";

2. Calculation style for elements

By using the object.style.property above, JavaScript can easily get and modify the object's set CSS style. But the limitation of this syntax is that it can only get inline in HTML style, or directly using JavaScript settings. Style objects cannot get styles that are set using an external style sheet. In order to get the "calculated style" of the object, we 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. Get the "class" attribute of the element

Similar to the "float" attribute, both browsers use different JavaScript methods to get this property.

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. Get the "for" property of the label label

As with 3, using JavaScript to get the label's "for" property also has different syntax.

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 true for the Setatrribute method.

5. Get the cursor position

Getting the cursor position of an element is relatively uncommon, and if you need to do so, the syntax for IE and Firefox is different. This sample code is fairly basic and is generally used as part of many complex event handling, and is used only to describe differences. It is important to note that the results in IE are different from those in Firefox, so there are some problems with this approach. Typically, this difference can be compensated by getting a "scrolling position"-but that's the subject of another article.

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;

JavaScript differences between IE and Firefox