Click here to get back home

change CSS definition by javascrip

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
change CSS definition by javascrip Gerhard Hönig 05-13-2005
Posted by Gerhard Hönig on May 13, 2005, 2:07 pm
Please log in for more thread options


Hi,

i have a basic question on CSS.
Is it possible to change the CSS class definition dynamically by using
Javascript.

example:
ich have a css class like this one:

.test {
color: red;
}

and some HTML tags like

<span class="test">bla bla</span>
..
<span class="test">bla bla</span>
..
<span class="test">bla bla</span>

and now ic would have a link/button to click and then change the color
attribute in class test to blue with Javascript (means without reloading
page and changing it on the server)

is that possible?

thanks.

gerhard




Posted by Philip Herlihy on May 13, 2005, 11:07 pm
Please log in for more thread options


You mean like this?
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_event_onmouse
or this:
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_examples_image
If so, try this:
http://www.w3schools.com/dhtml/default.asp

--
####################
## PH, London
####################
> Hi,
>
> i have a basic question on CSS.
> Is it possible to change the CSS class definition dynamically by using
> Javascript.
>
> example:
> ich have a css class like this one:
>
> .test {
> color: red;
> }
>
> and some HTML tags like
>
> <span class="test">bla bla</span>
> ..
> <span class="test">bla bla</span>
> ..
> <span class="test">bla bla</span>
>
> and now ic would have a link/button to click and then change the color
> attribute in class test to blue with Javascript (means without reloading
> page and changing it on the server)
>
> is that possible?
>
> thanks.
>
> gerhard
>
>
>




Posted by Ben Long on May 14, 2005, 4:57 pm
Please log in for more thread options


It is possible, but there are limitations and best practices you will
need to discover. One method is to create a css class for each case you
need. Then reference the object (span) via the DOM, and dynamically
change the classname of the object from one name to another.

for instance, you have this code:

<span class="aa" id="span1">Test Here</span>

You would reference the span tab by it's ID attribute, and then set the
classname like this:

mySpan = document.getElementById("span1");
mySpan.style.className = "ab";

Good luck. The syntax may be off a bit but this should get you in the
right direction.


Similar ThreadsPosted
What is the difference between a "A" and "TD A" definition ? May 9, 2007, 4:52 am
Definition lists March 3, 2008, 9:01 am
Status Code Definition of "-1" December 11, 2006, 11:45 am
numbered definition list July 23, 2007, 8:11 pm
Definition List format adjustments August 8, 2007, 3:44 am
Blank line after a definition list (DL)? March 2, 2008, 3:44 pm
How can I change the value in a css class? October 18, 2005, 9:04 am
change bgColor March 10, 2006, 9:13 am
Formmail form "From:" how to change June 21, 2005, 5:45 pm
Website needs refresh to change May 15, 2007, 10:06 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap