How do I change part of an element's class using Javascript?

mlse

12-22-2005, 03:38 PM

Hi.

I have some Javascript knocking around that I wrote a while ago.

In essence, what it does is to change certain style attributes of elements referenced by ID when a button is pressed.

For example:

Javascript:
function doChange(id)
{
document.getElementById(id).style.color="#FF0000";
document.getElementById(id).style.background-color="#00FF00";
document.getElementById(id).style.border-color="#0000FF";
/* and other stuff */
}

HTML:
<div id="thediv" class="theclass">
<p>Some Text Here</p>
<input type="button" value="click me" onclick="doChange('thediv');">
</div>

CSS:
DIV.theclass {
border:2px solid;
margin:100px 20px;
padding:70px;
}

Ok, this works fine, but what I would like to do is to be able to remove style information from the Javascript in order to make the script more generic.

Last example modified to show what I want to do:

Javascript:
function changeTheClass(obj, oldclass, newclass)
{
/* *** The magic class-changing code goes here! *** */
}

function doChange(id, oldclass, newclass)
{
changeTheClass(document.getElementById(id), oldclass, newclass);
/* and other stuff */
}

HTML:
<div id="thediv" class="theclass beforehand">
<p>Some Text Here</p>
<input type="button" value="click me" onclick="doChange('thediv', 'beforehand', 'afterwards');">
</div>

CSS:
DIV.theclass {
border:2px solid;
margin:100px 20px;
padding:70px;
}

DIV.beforehand{
color:#FFFFFF;
background-color:#999999;
border-color:#000000;
}

DIV.afterwards{
color:#FF0000;
background-color:#00FF00;
border-color:#0000FF;
}

The burning question is ... what is the magic code that goes in the changeTheClass function?? It must be able to change the class from "beforehand" to "afterwards" while preserving other class information (i.e. it must be able to change the class of the div from "theclass beforehand" to "theclass afterwards" - hence why I have included both "oldclass" and "newclass" in the function prototype - the function will need to know which part of the class specification to change!).

I know what I want to do, I just don't know the syntax! Any help on this much appreciated!

TIA,
Mike.

vwphillips

12-22-2005, 06:22 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">

</script>

<style type="text/css">

</style></head>

<body>

<div class="fred" style="width:100px;height:100px;"
onclick="CngClass(this,'tom');"
></div>
</body>

</html>

Pyth007

12-22-2005, 09:37 PM

Actually, what I think mlse will need in the changeClass function is to use the regular expression's replace() method to "search" the className for oldClass and then replace it with newClass. I'm away from a server where I could draft and test some code, but I know that there was a "suckerfish" script (http://www.htmldog.com/articles/suckerfish/)for adapting the :hover pseudo-class to work in IE that used a similar principle:

sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++)
{
sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

In this script, "sfhover" is the newClass when onmouseover and is oldClass when onmouseout (actually, the replace() in the onmouseout is probably the closest to what you are looking for). I think you can get what you want by adapting this and VWP's script... If you have trouble, let us know; I should be able to help out more tomorrow when I'm actually at my server...

mlse

12-23-2005, 12:03 PM

Hi guys,

Thanks for your responses! There is certainly enough info there for me to figure it out I reckon!

Thanks,
Mike.