global var in JS

Question

Hi!

I know that there is a difference between ff and ie regarding the attribute 'class'.

I want to put in the global.js something like that:

function GetVarByBrowser()
{
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var getClass= 'className';
  }
  else
  {
    var getClass= 'class';
  }

}

and in the page i added this:

ElementServer.setAttribute(GetVarByBrowser(), 'server');

how can i make it works?

Answer 1

No need for global variables. Have the function return the value instead:

function GetVarByBrowser()
{
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    return 'className';
  }
  else
  {
    return 'class';
  }

}

However, this is an imperfect method of browser detection for a number of reasons. Have you considered using a library like jQuery that takes care of quirks like this automatically? Or do you want to learn this yourself (which is perfectly fine and commendable)?

Answer 2

It's best to just use the x.className getter/setter property, which avoids needing to call attribute functions, and works on all browsers just the same.

Answer 3

I'd suggest a slightly different approach:

var setClassAttribute(e, value);
if (navigator.appName == 'Microsoft Internet Explorer')
{
    setClassAttribute = function(e, value) {
        e.setAttribute('className', value);
    }
}
else
{
    setClassAttribute = function(e, value) {
        e.setAttribute('class', value);
    }
}

Now you can use this new function like so:

setClassAttribute(ElementServer, 'server');

Answer 4

Never use browser detection! This will break in IE8 in Standards Mode!

There is no reason to use setAttribute in this case. e.className = 'some_class' will work in all browsers.