In this article, I will briefly outline several aspects of JavaScript syntax that differ between Internet Explorer and Firefox.
1. CSS “float” property
The basic syntax for getting a specific CSS property of a given object is the object.style property, and hyphenated properties use camel notation instead. For example, to get the background-color attribute of a div with the ID "header", we need to use the following syntax:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
But since "float" is JavaScript reserved word, we cannot use object.style.float to obtain the "float" attribute. Here’s how we use it in both browsers:
IE syntax:
document.getElementById("header").style.styleFloat = "left";
Firefox syntax:
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 obtain 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:
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 case of 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. Get the "for" attribute of the label label
Like 3, there are also different syntaxes for using JavaScript to get the "for" attribute of the label.
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. Get cursor position
Getting the cursor position of an element is rare, and if you need to do so, the syntax is different in IE and Firefox. This sample code is fairly basic and is typically used as part of many complex event handlers and is only used to describe the differences. It should be noted that the results in IE are different from those in Firefox, so there are some problems with this method. Often, this difference can be compensated for by obtaining the "scroll position" - but that's a topic for 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;