Using JS to change a CSS class name in IE6

**jobatkin** · 12-21-2009, 04:14 AM

I'm trying to create a JS function that will change the name of a CSS class.
It's working in IE8, and although IE6 does pick up the name change it DOES NOT seem to apply the actual changes. It's driving me crazy.

Here's my JS function:

Code:

function resizeContent() {

  var c = document.getElementById('content');
  var dV;
  if (window.getComputedStyle)
  {
	dV = window.getComputedStyle(e,null).getPropertyValue('display'); // CSS 2 Method
  }
  else if (e.currentStyle)
  {
	dV = eval('e.currentStyle.display'); //IE's method
  }

  if( dV == "block" )
  {
	c.setAttribute('class','withnav');
	c.setAttribute('className','withnav');
	c.className = 'withnav';
	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
  } 
  else 
  { 
	c.setAttribute('class','nonav');
	c.setAttribute('className','nonav');
	c.className = 'nonav';
	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
  }
}

The above will detect if the side menu is showing (dV == 'block') and adjust the css class accordingly. I need to use class names instead of individual style attributes, since I want the same class in the main stylesheet to show one width, and a different width when the print stylesheet is used for displaying the same class and HTML.

It seems to be working, in that my test alerts display the correct class names, but in IE6 the 'nonav' class doesn't actually get applied so you can't see the changes. withnav is displayed by default.

My HTML is very straightforward.
<a href="javascript:toggleDisplay('rhNav'),resizeContent();"><img src="/images/hdr_ico_toggle.gif" alt="Toggle the display of the right hand navigation bar" width="11" height="16" border="0"> Toggle Navigation Bar</a>
<div id="content" class="withnav">
...
</div>
is displayed initially with the class name changing dynamically.

I've been googling this for several hours with no luck. Anyone have any ideas?

**bluewalrus** · 12-21-2009, 04:21 AM

If the class is going into the element than it's probably a css browser specific issue. You'll probably need to post your css up as well or a link. I don't have any IE's so I won't be able to help but this will probably increase a response from someone that can.

**jobatkin** · 12-21-2009, 04:24 AM

Good point - forgot to include my css.
Here's the relevant classes:

Code:

#content.withnav
{
	width: 400px;
	border: 1px solid red;
}
#content.nonav
{
	width: 500px;
	border: 1px solid green;
}

The main thing I'm trying to do is change the width, but no matter what else I put in as well (eg. borders, font size changes) IE6 will not display it. IE8 does.

**jobatkin** · 12-21-2009, 05:25 AM

Still trying to fix this but no luck so far. I've condensed all the relevant code into one downloadable HTML snippet for easier testing:

Code:

<html>
<head>
<script>
function resizeContent() {

  var c = document.getElementById('content');

  if( c.getAttribute('className') == 'nonav' || c.getAttribute('class') == 'nonav' )
  {
	c.setAttribute('class','withnav');
	c.setAttribute('className','withnav');
	c.className = 'withnav';
	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
  }
  else
  {
	c.setAttribute('class','nonav');
	c.setAttribute('className','nonav');
	c.className = 'nonav';
	alert('set to class ' + c.getAttribute('class') + ' and classname ' + c.getAttribute('className'));
  }
}
</script>
<style>
#content.withnav
{
width: 400px;
border: 1px solid red;
}
#content.nonav
{
width: 500px;
border: 1px solid green;
}
</style>
</head>
<body>
<a href="javascript:resizeContent();"><img src="/images/hdr_ico_toggle.gif" alt="Toggle the display of the right hand navigation bar" width="11" height="16" border="0">&nbsp;Toggle Navigation Bar</a>
<div id="content" class="withnav">
<p>first paragraph is fairly short</p>
<p>next one is a bit longer with some extra text in it to push the width out a bit longer</p>
<p>third one is the longest yet and should be long enough in most screen widths to show some wrapping so we can see if the width restriction is being applied correctly with the javascript change in css class name.</p>
</div>
</body>
</html>

When you click on the toggle link the first time in IE6 it seems to remove all of the CSS rules from the div completely, while still updating the class name correctly (according to my alerts).

Baffled.

**jobatkin** · 12-21-2009, 06:10 AM

Figured it out!
IE6 doesn't like classes applied to IDs, e.g. #content.nonav

I'll have to maybe add another div for my styles and keep the id="content" one separate.

**jscheuer1** · 12-21-2009, 06:45 AM

You shouldn't have to use:

Code:

#content.withnav

Using:

Code:

.withnav

should be sufficient. The class definitions in the stylesheet should come after the id definitions, otherwise the id definitions might override them. Using the !important keyword for the class definitions will probably help if there is still a problem, ex:

Code:

.withnav {
width: 400px!important;
border: 1px solid red!important;
}

Also, all this crud (and similar):

Code:

	c.setAttribute('class','withnav');
	c.setAttribute('className','withnav');
	c.className = 'withnav';

can be replaced with, like:

Code:

	c.className = 'withnav';

All browsers support that method.

Thread: Using JS to change a CSS class name in IE6

Thread Tools

Search Thread

Using JS to change a CSS class name in IE6

The Following User Says Thank You to bluewalrus For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions