homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Changing Classes Through Javascript
I want to change the class of an object through a javascript event (onClick

 8:44 am on Jan 20, 2003 (gmt 0)

Hi guys, this is my first post so i'm not sure what exactly i should be putting, but lets cut to the chase..

Is it possible to change the class of an object (say a td field) from one predefined CSS class to another through the use of javascript. I've been investigating the use of the onClick trigger, and believe it could work if there is a command to set the class (or ID). i.e. something along the lines of

<td name="myTD" class="class1">
<A href="" onClick="myTD.style.class='class2'">change class</a>

I am wondering if you know any command i can use in the onClick (or any other event) that will have the desired affect. Thanks in advance for any assistance.

I am attempting to change the background colour and font settings of the field when the link is clicked. I have multiple fields that will require the same affect, and I am trying to minimise coding to help with load time.

Again thanks for anything.



 9:11 am on Jan 20, 2003 (gmt 0)

Ok, I've been doing some testing on other methods to do the same thing, and i am curious as to if there is any way to refer to a td field as an object.

the "name" property in the td field in the forementioned code does not seem to work. Any ideas? This will at least provide me with an alternative method of producing the desired result. The best I can do so far is using a 'this' for an event in the td tags


<td onMouseOver="this.style.backgroundColor='####';">

I could add more in the onMouseOver trigger. But the desired effect would not be achieved


 10:41 am on Jan 20, 2003 (gmt 0)

Try something like this:

<script language="JavaScript" type="text/javascript">
function chcol(nama) {
nama.style.backgroundColor = '#ff0000';
return true;
// -->
<table><tr><td id="tdn" onMouseOver="chcol(this)">Color</td> </tr></table>


 11:35 am on Jan 20, 2003 (gmt 0)

yep, I haven't tried that yet, but that's what I've been thinking about doing. The only problem I can see arising is that I only want one td cell to be highlighted at a time, and so i still need to be able to point at the other td cells to ensure they are the default colour settings.

Also, the new colour setting is only activated by clicking a link. I have a third scheme for when hovering over the field which has been implemented to my satisfaction using the onMouseOver and onMouseOut events


 12:30 pm on Jan 20, 2003 (gmt 0)

function chcol(nama) {
if(nama.id=='tdn0') { nama.style.backgroundColor = '#ff0000'}
else if (nama.id=='tdn1') { nama.style.backgroundColor = '#0000ff'}
return true;

function retcol(nama) {
nama.style.backgroundColor = '#ffffff';
return true;

// -->
<td id="tdn0" onMouseOver="chcol(this)" onMouseOut="retcol(this)">Color_0</td>
<td id="tdn1" onMouseOver="chcol(this)" onMouseOut="retcol(this)">Color_1</td>


 4:07 pm on Jan 20, 2003 (gmt 0)

Thanks for your great help.
In the end I got it out because of some of the ideas from your script combined with some of my own.

If anyone else has a similar problem, feel free to email me and i'll do my best to help u as Moby_Dim did me


 8:23 pm on Jan 20, 2003 (gmt 0)

Just to answer the question in the subject:



 6:31 am on Jan 21, 2003 (gmt 0)

You are right, c3oc3o. Thanx.


 3:33 am on Feb 11, 2003 (gmt 0)

Actually, it's this.style.className = 'someclassname';

Can't forget the style object. And the 'N' in className must be capitalized.



 9:24 am on Feb 16, 2003 (gmt 0)

Umm, nope, it's not part of the style of an element.



 3:54 pm on Feb 18, 2003 (gmt 0)

thanks for that.
I stand corrected.


 10:17 pm on Feb 19, 2003 (gmt 0)

Just to add, you can also switch style sheets

<link id="CSS" rel="stylesheet" type="text/css" href="CSS.css" />


document.getElementById('CSS').disabled = false // or true

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved