Common cross-browser JavaScript issues

Every person working on this era of web 2.0 have faced issues with cross-browser JavaScript support issues. Something that works in IE, is not working in Firefox or Safari, this is a very common issue we face in our day to day front-end development life. This is my small attempt to compile common JavaScript compatibility issues in existing common browsers. Lets get some in-depth of these.

Using innerText

This is one common mistake that we make in our life. innerText was introduced in earlier versions of Internet Explorer. It’s not supported in Firefox. But all other browsers are able to render it. As Firefox is currently considered as a major browser, it’s better avoiding use of innerText. It has a Firefox compatible workaround, textContent. But in general, my suggestion would be using innerHTML as there’s no binding in passing as text as HTML, it doesn’t create any extra overhead in the output.

Attribute conflict: class & for

You must have noticed that class & for are reserved words in JavaScript. But both are used as attribute names in HTML. So how do you access those attributes using script? They have a different workaround. HTML attribute class is triggered as className and for is triggered as htmlFor. So if you want to set the CSS class for your DOM object, you can do it as DomObject.className = ‘yourClassName’

To set the for attribute in a label object, labelObject.htmlFor = ‘objectId’

Manipulating style attribute

The value of the style attribute cannot be modified in the script as the others. If you are trying DomObject.style = ‘yourStyleText’, you will end up with no result. The way to handle this one is using cssText property. It can be used as DomObject.style.cssText = ‘yourStyleText’

Using setAttribute()

We all think of a common way of setting the DOM element attributes via setAttribute() method. But using this one, you might end up with some unexpected output. Like if you are trying to use setAttribute() for setting the CSS class, you’ll not get the proper styling in all browsers. All the browsers will not render the CSS class as defined, basically will skip the deceleration. So it’s better using the direct deceleration similar to an object structure; for example: DomObject.id = ‘yourId’

Using document.all

This is basically a way to identify a specific version of Internet Explorer, so be more precise, IE 4. As of the current trend, web development follows recent browsers starting from Internet Explorer 6. So a good practice would be to avoid using document.all.

Setting top, left, width & height Property from JavaScript

You may wonder, when you have calculated your value for any of these above mentioned property through a proper equation & still they are not getting shown properly in all browsers. What can be the case? Check your formula? No, it’s not getting a divide by zero error. Still why the exact value not visible in browser? Did you forget adding the unit of measurement? Right, that’s the most common case. Generally we do the calculation & set the value like this:

DomObj.style.left = someNumericVariable

If you intent to have the someNumericVariable to be the pixel size, you need to write it like this:

DomObj.style.left = someNumericVariable + ‘px’

Though some browser will assume it as pixels by default, but some will just ignore this assignment. In reality, all these CSS properties are string value.