Alter the properties of a CSS class?

[Noozer]

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>

 

[SpaceGirl]

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 #

 

[Noozer]

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

 

[Jeffrey Silverman]

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=gete...ient=firefox-a&rls=org.mozilla:en-US:official>

later...