Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Alter the properties of a CSS class?

Reply
Thread Tools

Alter the properties of a CSS class?

 
 
Noozer
Guest
Posts: n/a
 
      12-05-2004
I have several tags on a webpage of the same class. If the user clicks a
specific checkbox I'd like to be able to alter the display property of the
class, affecting all objects of that class.

This is an intranet application so we know that javascript will be enabled
and the browser will be IE.

How can I affect all the members of this class?

ie:

default.css file contains the following and is included into the HTLM
document:

.topicone { display:none; }
.topictwo { display:none; }

Relevant section of HTML code:
<input type="checkbox" onclick="flip('topicone')'">Show me information
about topic one.<br>
<input type="checkbox" onclick="flip('topictwo')'">Show me information
about topic two.<br>
<p>Please see the following:</p>
<p> Quick Points </p>
<p class="topicone">This is some information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>
<p> Details </p>
<p class="topicone">More information about topic one.</p>
<p class="topicone">More information about topic one.</p>
<p class="topictwo">This is some information about topic two.</p>


 
Reply With Quote
 
 
 
 
SpaceGirl
Guest
Posts: n/a
 
      12-05-2004
Noozer wrote:
> I have several tags on a webpage of the same class. If the user clicks a
> specific checkbox I'd like to be able to alter the display property of the
> class, affecting all objects of that class.
>
> This is an intranet application so we know that javascript will be enabled
> and the browser will be IE.
>
> How can I affect all the members of this class?
>
> ie:
>
> default.css file contains the following and is included into the HTLM
> document:
>
> .topicone { display:none; }
> .topictwo { display:none; }
>
> Relevant section of HTML code:
> <input type="checkbox" onclick="flip('topicone')'">Show me information
> about topic one.<br>
> <input type="checkbox" onclick="flip('topictwo')'">Show me information
> about topic two.<br>
> <p>Please see the following:</p>
> <p> Quick Points </p>
> <p class="topicone">This is some information about topic one.</p>
> <p class="topictwo">This is some information about topic two.</p>
> <p> Details </p>
> <p class="topicone">More information about topic one.</p>
> <p class="topicone">More information about topic one.</p>
> <p class="topictwo">This is some information about topic two.</p>
>
>


Yes, you can modify any CSS property on the fly.

Give the items you want to change a unique ID and you can selected them
in JS.

<div id="topic1">content</div>
<a href="#" onclick="switchBackground();">click here to change the
background</a>


In your code (for example);


<script type="text/javascript>

function switchBackground() {

myDiv = document.getElementById("topic1");

if (myDiv.style.backgroundColor != "black") {

myDiv.style.backgroundColor = "black";

} else {

myDiv.style.backgroundColor = "white";

}

</script>

This would change the background color of that div to black.

Now, you can write a simple loop around this to scan through ALL divs on
the page and change the properties of them, or even change the classes
rather than properties...


myDiv.class = "highlighted";


....would also work if you have a class called highlighted in your CSS.

You can actually modify anything inside the DOM using this technique.

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
Reply With Quote
 
 
 
 
Noozer
Guest
Posts: n/a
 
      12-06-2004

"SpaceGirl" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Noozer wrote:
> > I have several tags on a webpage of the same class. If the user clicks a
> > specific checkbox I'd like to be able to alter the display property of

the
> > class, affecting all objects of that class.
> >
> > This is an intranet application so we know that javascript will be

enabled
> > and the browser will be IE.
> >
> > How can I affect all the members of this class?
> >
> > ie:
> >
> > default.css file contains the following and is included into the HTLM
> > document:
> >
> > .topicone { display:none; }
> > .topictwo { display:none; }
> >
> > Relevant section of HTML code:
> > <input type="checkbox" onclick="flip('topicone')'">Show me information
> > about topic one.<br>
> > <input type="checkbox" onclick="flip('topictwo')'">Show me information
> > about topic two.<br>
> > <p>Please see the following:</p>
> > <p> Quick Points </p>
> > <p class="topicone">This is some information about topic one.</p>
> > <p class="topictwo">This is some information about topic two.</p>
> > <p> Details </p>
> > <p class="topicone">More information about topic one.</p>
> > <p class="topicone">More information about topic one.</p>
> > <p class="topictwo">This is some information about topic two.</p>
> >
> >

>
> Yes, you can modify any CSS property on the fly.
>
> Give the items you want to change a unique ID and you can selected them
> in JS.
>
> <div id="topic1">content</div>
> <a href="#" onclick="switchBackground();">click here to change the
> background</a>
>
>
> In your code (for example);
>
>
> <script type="text/javascript>
>
> function switchBackground() {
>
> myDiv = document.getElementById("topic1");
>
> if (myDiv.style.backgroundColor != "black") {
>
> myDiv.style.backgroundColor = "black";
>
> } else {
>
> myDiv.style.backgroundColor = "white";
>
> }
>
> </script>
>
> This would change the background color of that div to black.
>
> Now, you can write a simple loop around this to scan through ALL divs on
> the page and change the properties of them, or even change the classes
> rather than properties...
>
>
> myDiv.class = "highlighted";
>
>
> ...would also work if you have a class called highlighted in your CSS.
>
> You can actually modify anything inside the DOM using this technique.


Appreciated, but is there any way to do this without having to specify ID's
for all the related elements? Much of the content is dynamically generated
and generating DIV's would be a pain.

Thx


 
Reply With Quote
 
Jeffrey Silverman
Guest
Posts: n/a
 
      12-06-2004
On Mon, 06 Dec 2004 14:59:29 +0000, Noozer wrote:

>
> Appreciated, but is there any way to do this without having to specify ID's
> for all the related elements? Much of the content is dynamically generated
> and generating DIV's would be a pain.
>
> Thx


I didn't read in detail, but these links might help you (and they might
not):

<http://www.webmasterworld.com/forum91/1729.htm>
<http://www.google.com/search?q=getelementbyclass&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-USfficial>

later...

--
Jeffrey D. Silverman | http://www.velocityreviews.com/forums/(E-Mail Removed)
Website | http://www.newtnotes.com

Drop "PANTS" to reply by email

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Alter - Perl extension for Alter Ego Objects anno4000@radom.zrz.tu-berlin.de Perl Misc 0 06-30-2007 04:13 PM
Microsoft may have to alter Vista Silverstrand Front Page News 0 07-25-2005 11:04 PM
Is it possible to alter Ant properties after they've been initialized? vturner Java 4 09-21-2004 06:16 PM
Alter Rendered HTML for page Kersh ASP .Net 6 08-06-2003 03:29 PM
alter web.config from asp.net web form? eRic ASP .Net 2 07-31-2003 05:33 PM



Advertisments