setAttribute workaround for IE

Another beautiful quirk in Internet Explorer is it's poor implementation of the setAttribute method. It's something I tried to make use of for my custom 'lightbox', but off course I had a lot of trouble getting it working.

After a bit of searching I came across a fix at webmasterworld.com. Using the setAttribute method should allow you to apply a class, an id, an event or any other attribute to an element. From what I've read, IE does this to some extent. It does apply the attribute you request, but not to the HTML element, it instead applies it to the JavaScript reference to the HTML element.

A subtle difference in definition, but another subtle difference that can add hours to your development time!

Whereas compliant browsers would use:

element.setAttribute('onclick','event();')

IE needs the following:

element.onclick = eventCaller;

function eventCaller() {
  event();
}

Once I had the above working, I was confident that I could work around this so that the eventCaller function wasn't necessary, but it seems that it is.

For other attributes, such as the class name, you'll need the following:

element.className = 'class-name';

Styles work in a different way and it makes sense not to use the setAttribute method, but it would be nice to have the option to apply all your styles just once, rather than creating a new reference for every single one.

Microsoft promises that IE8 will be the most compliant version, but I sincerely hope that their claims don't just apply to CSS and the DOM, but to the JavaScript API and JavaScript methods too.