Welcome to WebmasterWorld Guest from 54.144.124.152

Forum Moderators: open

Message Too Old, No Replies

Changing Classes Through Javascript

I want to change the class of an object through a javascript event (onClick

     

ChromeDome

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

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

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

10+ Year Member



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

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

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

10+ Year Member



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

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

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

10+ Year Member



Just to answer the question in the subject:

this.className='newclass';

Moby_Dim

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

10+ Year Member



You are right, c3oc3o. Thanx.

ricfink

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

10+ Year Member



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

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

ciao

c3oc3o

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

10+ Year Member



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

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

ricfink

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

10+ Year Member



thanks for that.
I stand corrected.

gph

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

10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month