homepage Welcome to WebmasterWorld Guest from 54.166.65.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
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
ChromeDome




msg:1479108
 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>
</td>
...

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.

P.S.
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.

 

ChromeDome




msg:1479109
 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

i.e.

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

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

Moby_Dim




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

Try something like this:

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

ChromeDome




msg:1479111
 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

Moby_Dim




msg:1479112
 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;
}

// -->
</script>
</head>
<body>
...
<table><tr>
<td id="tdn0" onMouseOver="chcol(this)" onMouseOut="retcol(this)">Color_0</td>
<td id="tdn1" onMouseOver="chcol(this)" onMouseOut="retcol(this)">Color_1</td>
.....

ChromeDome




msg:1479113
 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

c3oc3o




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

Just to answer the question in the subject:

this.className='newclass';

Moby_Dim




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

You are right, c3oc3o. Thanx.

ricfink




msg:1479116
 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.

ciao

c3oc3o




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

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

[mozilla.org...]
[msdn.microsoft.com...]

ricfink




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

thanks for that.
I stand corrected.

gph




msg:1479119
 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" />

then

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