setAttribute cross browser issue

Hey,

I'm trying to use setAttribute to hide and shows divs within a page, it works fine in IE8, Firefox but when I go back to IE7, IE6 then nothing happens.

I've searched around and found this to be a common issue yet can't find a work around for the issue

var elm = document.getElementById("centercolumn");
elm.setAttribute('class','centercolumnload');

var elm2 = document.getElementById("closeCrossPlay");
elm2.setAttribute('class','closeCross');

Code (markup):

Basically I need to chance the following two divs to and from display:block to and from display:inline

<div id="centercolumn"></div>
<div id="closeCrossPlay"></div>

HTML:

 

Take a look here: http://www.inmyexperience.com/archives/000428.shtml and comments by alpha on June 9, 2004 04:29 AM (it's near bottom of page). Seems like he has a solution for IE6.
I myself use jQuery so I don't think about compatibility. Using jQuery it will be:

$("#centercolumn").addClass('centercolumnload');

Code (markup):

And this will work in IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome as they say on the site.

 

ashine: PLEASE, enough of the jquery solves all solutions... you are not helping at all. using a framework just to set a class? come on...

using setAttribute can be quirky in IE.

first of all, you need a xhtml doctype.

then consider setting property direct or setting via setAttribute. in your case this is:
element.className = "blah"; vs element.setAttribute("class", "blah");

there was something about the setAttribute in older versions of IE being able to access the DOM Level 2 attribute but it's not representative of the original DOM property, i.e. it's not a 'live' change as such.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288 -> relevant doc but it does not work like that in reality.

so stick to element.className = "value", this is what frameworks use (yes, even jquery!).

example .addClass as element prototypes in mootools:

	addClass: function(className){
		if (!this.hasClass(className)) this.className = (this.className + ' ' + className).clean();
		return this;
	},

Code (javascript):

in jquery, they also use className (although the performance of the addClass is worse than the mt one, this is from an internal method):

	className: {
		// internal only, use addClass("class")
		add: function( elem, classNames ) {
			jQuery.each((classNames || "").split(/\s+/), function(i, className){
				if ( elem.nodeType == 1 && !jQuery.className.has( elem.className, className ) )
					elem.className += (elem.className ? " " : "") + className;
			});
		},

Code (javascript):