471,119 Members | 1,376 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,119 software developers and data experts.

Change CSS Class property using javascript?

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? Is there a way I can toggle
the DISPLAY property of a class so all the elements using that class would
be affected?

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>


Jul 23 '05 #1
3 26377
"Noozer" <do*******@me.here> wrote in message news:<k2Msd.434866$nl.289708@pd7tw3no>...
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? Is there a way I can toggle
the DISPLAY property of a class so all the elements using that class would
be affected?

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>


Not really enough information, but...IE-only:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

body {
font: normal 90% verdana;
}
..topicone {
font: normal 80% verdana;
color: #600;
display: none;
}
..topictwo {
font: normal 80% verdana;
color: #060;
display: none;
}

</style>
<script type="text/javascript">

function IE_set_class(clanSheetame)
{
var re = new RegExp(clanSheetame);
var rules, nRule,
nRules, SS, nSheet = 0,
nSheets = document.styleSheets.length;
for (nSheet; nSheet < nSheets; ++nSheet)
{
SS = document.styleSheets.item(nSheet);
rules = SS.rules;
nRules = rules.length;
for (nRule = 0; nRule < nRules; ++nRule)
{
rule = SS.rules.item(nRule);
if (re.test(rule.selectorText))
{
for (var a = 1; a < arguments.length; a+=2)
rule.style[arguments[a]] = arguments[a + 1];
return;
}
}
}
}

function toggleclass(obj)
{
var dval = obj.checked ? 'block' : 'none';
IE_set_class(obj.value, 'display', dval)
}

onload = function()
{//keep things in sync
var i = 0,
ipt,
ipts = document.getElementsByTagName('input');
while (ipt = ipts.item(i++))
if (/toggle/i.test(ipt.name))
ipt.onclick();
}

</script>
</head>
<body>
<form>
<input type="checkbox" name="toggle" value="topicone"
onclick="toggleclass(this)">Show me information
about topic one.<br>
<input type="checkbox" name="toggle" value="topictwo"
onclick="toggleclass(this)">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>
</form>
</body>
</html>
Jul 23 '05 #2


...lol - I did a S&R to change var 'SSn' to 'nSheet' and it also changed
'classname' to 'clanSheetame' which sounds vaguely Scottish. I am sorry.
:o

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #3
Rob B wrote:

...lol - I did a S&R to change var 'SSn' to 'nSheet' and it also changed
'classname' to 'clanSheetame' which sounds vaguely Scottish. I am sorry.
:o


And here I was thinking you were being creative. Shazam!

--
Rob
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Alexandre Jaquet | last post: by
16 posts views Thread by Java script Dude | last post: by
16 posts views Thread by Giggle Girl | last post: by
15 posts views Thread by Sunny | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.