Can I change the CSS Class using innerHTML?

HCL Domino Domino Forum
1

Hi,

Is it possible to change the CSS class of a div object by re-writing the innerHTML ?

I have some menus in a left hand pane that are orange - this is set up by naming them class=“orangeMMbuttons” and using CSS.

I then have a drop down field that calls another page into the main frame. In the onload event of this page I then change the buttons to suit the new content. This involes changing their colour, href and title.

The href and title change OK but the class change doesn’t seem to affect the colour of the button - any reason why this should be ?

Thanks

Paul

Example Code

The source code from the opening page

Location map
Meeting rooms
Croydon information
Services / contacts
Green Champions
WEEE
Post room

The onload of the new called page:

top.document.getElementById('lb1').innerHTML="<div id=\"lb1\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink1.value + "\" title=\"" + frm.buttonTitle1.value + "\">" + frm.buttonTitle1.value + "</a></div>";

top.document.getElementById('lb2').innerHTML="<div id=\"lb2\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink2.value + "\" title=\"" + frm.buttonTitle2.value + "\">" + frm.buttonTitle2.value + "</a></div>";

top.document.getElementById('lb3').innerHTML="<div id=\"lb3\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink3.value + "\" title=\"" + frm.buttonTitle3.value + "\">" + frm.buttonTitle3.value + "</a></div>";

top.document.getElementById('lb4').innerHTML="<div id=\"lb4\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink4.value + "\" title=\"" + frm.buttonTitle4.value + "\">" + frm.buttonTitle4.value + "</a></div>";

top.document.getElementById('lb5').innerHTML="<div id=\"lb5\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink5.value + "\" title=\"" + frm.buttonTitle5.value + "\">" + frm.buttonTitle5.value + "</a></div>";

top.document.getElementById('lb6').innerHTML="<div id=\"lb6\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink6.value + "\" title=\"" + frm.buttonTitle6.value + "\">" + frm.buttonTitle6.value + "</a></div>";

top.document.getElementById('lb7').innerHTML="<div id=\"lb7\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink7.value + "\" title=\"" + frm.buttonTitle7.value + "\">" + frm.buttonTitle7.value + "</a></div>";
2

Subject: can I change the CSS Class using innerHTML ?

The class is an attribute of the

tag, and because it lives inside the angle brackets it is not a part of the innerHTML (the stuff between the tags). You can change the class using the className property of the div.

3

Subject: thanks Stan

Thanks for that it works, although there is something weird going on !!

For each of the fields instead of one line of code re-setting the innerHtml I now have two. The preceding line of code now finds and changes the className attribute, thus:

top.document.getElementById('lb1').className = frm.menuColour.value + "MMbuttons";

top.document.getElementById('lb1').innerHTML = "<div id=\"lb1\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink1.value + "\" title=\"" + frm.buttonTitle1.value + "\">" + frm.buttonTitle1.value + "</a></div>";

The interesting (weird) thing is that this also works:

top.document.getElementById('lb1').className = "";

top.document.getElementById('lb1').innerHTML = "<div id=\"lb1\" class=\"" + frm.menuColour.value + "MMbuttons\"><a href=\"" + frm.buttonLink1.value + "\" title=\"" + frm.buttonTitle1.value + "\">" + frm.buttonTitle1.value + "</a></div>";

It seems that if you grab the ‘className’ attribute you can then change its value in the innerHTML !! Weird.

Thanks once again for solving my problem.

Paul

4

Subject: RE: thanks Stan

You are adding a second div with the id “lb1” inside the existing one. Your innerHTML code should just be:

top.document.getElementById(‘lb1’).innerHTML = “<a href="” + frm.buttonLink1.value + “" title="” + frm.buttonTitle1.value + “">” + frm.buttonTitle1.value + “”;

That changes the value of the link without injecting a conflicting div. (Note that if you have two divs with the same id, the result of a second call to the function is undefined. It may work – it shouldn’t, but it may – or it may error out.)

5

Subject: RE: thanks Stan

thanks again, as ever I’m in your debt.

cheers

paul