Even though the days of JavaScript's history of using long and boring blocks of code to target specific browsers are over, it's still necessary to occasionally use some simple code blocks and object detection to ensure that some code works correctly on the user's machine.
In this article, I will outline 7 ways in which JavaScript syntax differs 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 a reserved word in JavaScript, we cannot use object.style.float to get 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. Calculation style of elements
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. Obtaining the "for" attribute of the label
is the same as 3. Using JavaScript to obtain the "for" attribute of the label 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 used for the setAtrribute method.
5. Get the cursor position
It is rare to get the cursor position of an element. If you need to do this, the syntax of IE and Firefox is also different. 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.